developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
张善主
f9933847 1 parent 724134e6

feat(动态)：增加底部按钮

Inline Side-by-side
Showing 1 changed file with 286 additions and 237 deletions
@@ -14,6 +14,7 @@ import display from '@ohos.display'; @@ -14,6 +14,7 @@ import display from '@ohos.display';
14 import { BusinessError } from '@ohos.base'; 14 import { BusinessError } from '@ohos.base';
15 import { CommonConstants } from 'wdConstant/Index'; 15 import { CommonConstants } from 'wdConstant/Index';
16 import { CardMediaInfo } from '../components/cardCommon/CardMediaInfo' 16 import { CardMediaInfo } from '../components/cardCommon/CardMediaInfo'
  17 +import router from '@ohos.router';
17 const TAG = 'DynamicDetailComponent' 18 const TAG = 'DynamicDetailComponent'
18 @Preview 19 @Preview
19 @Component 20 @Component
@@ -32,6 +33,7 @@ export struct DynamicDetailComponent { @@ -32,6 +33,7 @@ export struct DynamicDetailComponent {
32 newsType:15 33 newsType:15
33 } as ContentDetailDTO 34 } as ContentDetailDTO
34 //变量 35 //变量
  36 + scroller: Scroller = new Scroller();
35 /** 37 /**
36 * 默认未关注 点击去关注 38 * 默认未关注 点击去关注
37 */ 39 */
@@ -55,7 +57,6 @@ export struct DynamicDetailComponent { @@ -55,7 +57,6 @@ export struct DynamicDetailComponent {
55 } 57 }
56 58
57 build() { 59 build() {
58 - Row() {  
59 Column(){ 60 Column(){
60 //logo、日期 61 //logo、日期
61 Row() { 62 Row() {
@@ -77,259 +78,307 @@ export struct DynamicDetailComponent { @@ -77,259 +78,307 @@ export struct DynamicDetailComponent {
77 .width('100%') 78 .width('100%')
78 .height($r('app.float.margin_7')) 79 .height($r('app.float.margin_7'))
79 .margin({left: $r('app.float.margin_16'), right: $r('app.float.margin_16')} ) 80 .margin({left: $r('app.float.margin_16'), right: $r('app.float.margin_16')} )
80 - //号主信息  
81 - Row() {  
82 - //头像  
83 - Stack() {  
84 - Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)  
85 - .alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater'))  
86 - .width($r('app.float.margin_32'))  
87 - .height($r('app.float.margin_32'))  
88 - .objectFit(ImageFit.Cover)  
89 - .borderRadius($r('app.float.margin_16'))  
90 - Image($r('app.media.icon_border_test'))  
91 - .width($r('app.float.margin_48'))  
92 - .height($r('app.float.margin_48'))  
93 - .objectFit(ImageFit.Cover)  
94 - .borderRadius($r('app.float.margin_24'))  
95 - }  
96 - .width($r('app.float.margin_48'))  
97 - .height($r('app.float.margin_48'))  
98 - .alignContent(Alignment.Center)  
99 - Column(){  
100 - //昵称  
101 - Text(this.contentDetailData.rmhInfo?.rmhName)  
102 - .fontSize($r('app.float.font_size_14'))  
103 - .fontColor($r('app.color.color_222222'))  
104 - .fontWeight(FontWeight.Medium)  
105 - .margin({ left: $r('app.float.margin_5') })  
106 - .alignSelf(ItemAlign.Start)  
107 - //简介  
108 - Text(this.contentDetailData.rmhInfo?.rmhDesc)  
109 - .fontSize($r('app.float.font_size_14'))  
110 - .fontColor($r('app.color.color_B0B0B0'))  
111 - .fontWeight(FontWeight.Medium)  
112 - .maxLines(1)  
113 - .margin({ left: $r('app.float.margin_5') })  
114 - .alignSelf(ItemAlign.Start)  
115 - }  
116 - .width('63%')  
117 - .margin({right: $r('app.float.margin_6')})  
118 - if (this.followStatus == '0') {  
119 - Text('关注')  
120 - .width($r('app.float.margin_54'))  
121 - .height($r('app.float.margin_24'))  
122 - .textAlign(TextAlign.Center)  
123 - .fontSize($r('app.float.font_size_12'))  
124 - .borderRadius($r('app.float.vp_3'))  
125 - .backgroundColor($r('app.color.color_ED2800'))  
126 - .fontColor($r('app.color.color_fff'))  
127 - .onClick(() => {  
128 - // this.handleAccention(this.item, 1)  
129 - })  
130 - } else {  
131 - Text('已关注')  
132 - .width($r('app.float.margin_54'))  
133 - .height($r('app.float.margin_24'))  
134 - .borderWidth(1)  
135 - .textAlign(TextAlign.Center)  
136 - .fontSize($r('app.float.font_size_12'))  
137 - .borderRadius($r('app.float.vp_3'))  
138 - .borderColor($r('app.color.color_CCCCCC'))  
139 - .fontColor($r('app.color.color_CCCCCC'))  
140 - .onClick(() => {  
141 - // this.handleAccention(this.item, 0)  
142 - })  
143 - }  
144 - }  
145 - .width('100%')  
146 - .margin({ left: $r('app.float.margin_16')})  
147 - //内容  
148 - Text(StringUtils.isEmpty(this.contentDetailData.newsContent)  
149 - ?StringUtils.isEmpty(this.contentDetailData.newsSummary)  
150 - ?this.contentDetailData.newsTitle  
151 - :this.contentDetailData.newsSummary  
152 - :this.contentDetailData.newsContent)  
153 - .fontColor($r('app.color.color_222222'))  
154 - .fontSize($r('app.float.font_size_18'))  
155 - .lineHeight($r('app.float.margin_25'))  
156 - .margin({ top: $r('app.float.margin_6')  
157 - ,left: $r('app.float.margin_16')  
158 - ,right: $r('app.float.margin_16') })  
159 - .alignSelf(ItemAlign.Start)  
160 - if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){  
161 - //附件内容：图片/视频  
162 - if(this.contentDetailData.photoList!= null && this.contentDetailData.photoList.length>0){  
163 - // 图片-从无图到9图展示  
164 - GridRow({  
165 - gutter: { x: 2, y: 2 }  
166 - }) {  
167 - ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {  
168 - if (this.contentDetailData.photoList.length === 1) {  
169 - if (this.getPicType(item) !== 3) {  
170 - GridCol({  
171 - span: this.getPicType(item) === 1 ? 12 : 8  
172 - }){  
173 - Stack({  
174 - alignContent: Alignment.BottomEnd  
175 - }) {  
176 - if (this.getPicType(item) === 1) { 81 + Stack({ alignContent: Alignment.Bottom }) {
  82 + Scroll(this.scroller) {
  83 + Column() {
  84 + //号主信息
  85 + Row() {
  86 + //头像
  87 + Stack() {
  88 + Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
  89 + .alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater'))
  90 + .width($r('app.float.margin_32'))
  91 + .height($r('app.float.margin_32'))
  92 + .objectFit(ImageFit.Cover)
  93 + .borderRadius($r('app.float.margin_16'))
  94 + Image($r('app.media.icon_border_test'))
  95 + .width($r('app.float.margin_48'))
  96 + .height($r('app.float.margin_48'))
  97 + .objectFit(ImageFit.Cover)
  98 + .borderRadius($r('app.float.margin_24'))
  99 + }
  100 + .width($r('app.float.margin_48'))
  101 + .height($r('app.float.margin_48'))
  102 + .alignContent(Alignment.Center)
  103 + Column(){
  104 + //昵称
  105 + Text(this.contentDetailData.rmhInfo?.rmhName)
  106 + .fontSize($r('app.float.font_size_14'))
  107 + .fontColor($r('app.color.color_222222'))
  108 + .fontWeight(FontWeight.Medium)
  109 + .margin({ left: $r('app.float.margin_5') })
  110 + .alignSelf(ItemAlign.Start)
  111 + //简介
  112 + Text(this.contentDetailData.rmhInfo?.rmhDesc)
  113 + .fontSize($r('app.float.font_size_14'))
  114 + .fontColor($r('app.color.color_B0B0B0'))
  115 + .fontWeight(FontWeight.Medium)
  116 + .maxLines(1)
  117 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  118 + .margin({ left: $r('app.float.margin_5') })
  119 + .alignSelf(ItemAlign.Start)
  120 + }
  121 + .width('63%')
  122 + .margin({right: $r('app.float.margin_6')})
  123 + if (this.followStatus == '0') {
  124 + Text('关注')
  125 + .width($r('app.float.margin_54'))
  126 + .height($r('app.float.margin_24'))
  127 + .textAlign(TextAlign.Center)
  128 + .fontSize($r('app.float.font_size_12'))
  129 + .borderRadius($r('app.float.vp_3'))
  130 + .backgroundColor($r('app.color.color_ED2800'))
  131 + .fontColor($r('app.color.color_fff'))
  132 + .onClick(() => {
  133 + // this.handleAccention(this.item, 1)
  134 + })
  135 + } else {
  136 + Text('已关注')
  137 + .width($r('app.float.margin_54'))
  138 + .height($r('app.float.margin_24'))
  139 + .borderWidth(1)
  140 + .textAlign(TextAlign.Center)
  141 + .fontSize($r('app.float.font_size_12'))
  142 + .borderRadius($r('app.float.vp_3'))
  143 + .borderColor($r('app.color.color_CCCCCC'))
  144 + .fontColor($r('app.color.color_CCCCCC'))
  145 + .onClick(() => {
  146 + // this.handleAccention(this.item, 0)
  147 + })
  148 + }
  149 + }
  150 + .width('100%')
  151 + .margin({ left: $r('app.float.margin_16')})
  152 + //内容
  153 + Text(StringUtils.isEmpty(this.contentDetailData.newsContent)
  154 + ?StringUtils.isEmpty(this.contentDetailData.newsSummary)
  155 + ?this.contentDetailData.newsTitle
  156 + :this.contentDetailData.newsSummary
  157 + :this.contentDetailData.newsContent)
  158 + .fontColor($r('app.color.color_222222'))
  159 + .fontSize($r('app.float.font_size_18'))
  160 + .lineHeight($r('app.float.margin_25'))
  161 + .margin({ top: $r('app.float.margin_6')
  162 + ,left: $r('app.float.margin_16')
  163 + ,right: $r('app.float.margin_16') })
  164 + .alignSelf(ItemAlign.Start)
  165 + if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){
  166 + //附件内容：图片/视频
  167 + if(this.contentDetailData.photoList!= null && this.contentDetailData.photoList.length>0){
  168 + // 图片-从无图到9图展示
  169 + GridRow({
  170 + gutter: { x: 2, y: 2 }
  171 + }) {
  172 + ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
  173 + if (this.contentDetailData.photoList.length === 1) {
  174 + if (this.getPicType(item) !== 3) {
  175 + GridCol({
  176 + span: this.getPicType(item) === 1 ? 12 : 8
  177 + }){
  178 + Stack({
  179 + alignContent: Alignment.BottomEnd
  180 + }) {
  181 + if (this.getPicType(item) === 1) {
  182 + Image(item.picPath)
  183 + .width('100%')
  184 + .height(172)
  185 + .autoResize(true)
  186 + .borderRadius(this.caclImageRadius(index))
  187 + } else if (this.getPicType(item) === 2) {
  188 + Image(item.picPath)
  189 + .width('100%')
  190 + .height(305)
  191 + .autoResize(true)
  192 + .borderRadius(this.caclImageRadius(index))
  193 + }
  194 + Flex({ direction: FlexDirection.Row }) {
  195 + Image($r('app.media.icon_long_pic'))
  196 + .width(14)
  197 + .height(14)
  198 + .margin({right: 4})
  199 + Text('长图')
  200 + .fontSize(12)
  201 + .fontWeight(400)
  202 + .fontColor(0xffffff)
  203 + .fontFamily('PingFang SC')
  204 + }
  205 + .width(48)
  206 + .padding({bottom: 9})
  207 +
  208 + }
  209 + }
  210 + .onClick((event: ClickEvent) => {
  211 + ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList)
  212 + })
  213 + } else {
  214 + GridCol({
  215 + span: { xs: 8 }
  216 + }) {
  217 + Image(item.picPath)
  218 + .width('100%')
  219 + .borderRadius(this.caclImageRadius(index))
  220 + .autoResize(true)
  221 + .opacity(!item.width && !item.height ? 0 : 1)
  222 + .onComplete(callback => {
  223 + item.width = callback?.width || 0;
  224 + item.height = callback?.height || 0;
  225 + })
  226 + }
  227 + }
  228 + } else if (this.contentDetailData.photoList.length === 4) {
  229 + GridCol({
  230 + span: { xs: 4 }
  231 + }) {
177 Image(item.picPath) 232 Image(item.picPath)
178 - .width('100%')  
179 - .height(172)  
180 - .autoResize(true) 233 + .aspectRatio(1)
181 .borderRadius(this.caclImageRadius(index)) 234 .borderRadius(this.caclImageRadius(index))
182 - } else if (this.getPicType(item) === 2) { 235 + }
  236 + } else {
  237 + GridCol({
  238 + span: { sm: 4, lg: 3 }
  239 + }) {
183 Image(item.picPath) 240 Image(item.picPath)
184 - .width('100%')  
185 - .height(305)  
186 - .autoResize(true) 241 + .aspectRatio(1)
187 .borderRadius(this.caclImageRadius(index)) 242 .borderRadius(this.caclImageRadius(index))
188 } 243 }
189 - Flex({ direction: FlexDirection.Row }) {  
190 - Image($r('app.media.icon_long_pic'))  
191 - .width(14)  
192 - .height(14)  
193 - .margin({right: 4})  
194 - Text('长图')  
195 - .fontSize(12)  
196 - .fontWeight(400)  
197 - .fontColor(0xffffff)  
198 - .fontFamily('PingFang SC')  
199 - }  
200 - .width(48)  
201 - .padding({bottom: 9})  
202 -  
203 } 244 }
204 - }  
205 - .onClick((event: ClickEvent) => {  
206 - ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList)  
207 }) 245 })
208 - } else {  
209 - GridCol({  
210 - span: { xs: 8 }  
211 - }) {  
212 - Image(item.picPath)  
213 - .width('100%')  
214 - .borderRadius(this.caclImageRadius(index))  
215 - .autoResize(true)  
216 - .opacity(!item.width && !item.height ? 0 : 1)  
217 - .onComplete(callback => {  
218 - item.width = callback?.width || 0;  
219 - item.height = callback?.height || 0;  
220 - })  
221 - }  
222 - }  
223 - } else if (this.contentDetailData.photoList.length === 4) {  
224 - GridCol({  
225 - span: { xs: 4 }  
226 - }) {  
227 - Image(item.picPath)  
228 - .aspectRatio(1)  
229 - .borderRadius(this.caclImageRadius(index))  
230 - }  
231 - } else {  
232 - GridCol({  
233 - span: { sm: 4, lg: 3 }  
234 - }) {  
235 - Image(item.picPath)  
236 - .aspectRatio(1)  
237 - .borderRadius(this.caclImageRadius(index))  
238 } 246 }
  247 + .margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
239 } 248 }
240 - })  
241 - }  
242 - .margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})  
243 - }  
244 - }else{  
245 - if(this.contentDetailData.videoInfo!= null && this.contentDetailData.videoInfo.length>0){  
246 - GridRow() {  
247 - if (this.contentDetailData.videoInfo[0].videoLandScape === 1) {  
248 - // 横屏  
249 - GridCol({  
250 - span: { xs: 12 }  
251 - }) {  
252 - Stack() {  
253 - Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?  
254 - this.contentDetailData.fullColumnImgUrls[0].url:  
255 - this.contentDetailData.videoInfo[0].firstFrameImageUri)  
256 - .width(CommonConstants.FULL_WIDTH)  
257 - .aspectRatio(16 / 9)  
258 - .borderRadius($r('app.float.image_border_radius'))  
259 - CardMediaInfo({ contentDTO: this.mJumpInfo })  
260 - }  
261 - .align(Alignment.BottomEnd)  
262 - }  
263 - } else {  
264 - // 竖图显示，宽度占50%，高度自适应  
265 - GridCol({  
266 - span: { xs: 6 }  
267 - }) {  
268 - Stack() {  
269 - Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?  
270 - this.contentDetailData.fullColumnImgUrls[0].url:  
271 - this.contentDetailData.videoInfo[0].firstFrameImageUri)  
272 - .width(CommonConstants.FULL_WIDTH)  
273 - .borderRadius($r('app.float.image_border_radius'))  
274 - CardMediaInfo({ contentDTO: this.mJumpInfo }) 249 + }else{
  250 + if(this.contentDetailData.videoInfo!= null && this.contentDetailData.videoInfo.length>0){
  251 + GridRow() {
  252 + if (this.contentDetailData.videoInfo[0].videoLandScape === 1) {
  253 + // 横屏
  254 + GridCol({
  255 + span: { xs: 12 }
  256 + }) {
  257 + Stack() {
  258 + Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
  259 + this.contentDetailData.fullColumnImgUrls[0].url:
  260 + this.contentDetailData.videoInfo[0].firstFrameImageUri)
  261 + .width(CommonConstants.FULL_WIDTH)
  262 + .aspectRatio(16 / 9)
  263 + .borderRadius($r('app.float.image_border_radius'))
  264 + CardMediaInfo({ contentDTO: this.mJumpInfo })
  265 + }
  266 + .align(Alignment.BottomEnd)
  267 + }
  268 + } else {
  269 + // 竖图显示，宽度占50%，高度自适应
  270 + GridCol({
  271 + span: { xs: 6 }
  272 + }) {
  273 + Stack() {
  274 + Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
  275 + this.contentDetailData.fullColumnImgUrls[0].url:
  276 + this.contentDetailData.videoInfo[0].firstFrameImageUri)
  277 + .width(CommonConstants.FULL_WIDTH)
  278 + .borderRadius($r('app.float.image_border_radius'))
  279 + CardMediaInfo({ contentDTO: this.mJumpInfo })
  280 + }
  281 + .align(Alignment.BottomEnd)
  282 + }
  283 + }
275 } 284 }
276 - .align(Alignment.BottomEnd) 285 + .margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
  286 + .onClick((event: ClickEvent) => {
  287 + this.mJumpInfo.objectType = ContentConstants.TYPE_VOD;
  288 + ProcessUtils.processPage(this.mJumpInfo)
  289 + })
277 } 290 }
278 } 291 }
  292 + //特别声明
  293 + Text("特别声明：本文为人民日报新媒体平台“人民号”作者上传并发布，仅代表作者观点。人民日报仅提供信息发布平台。")
  294 + .fontColor($r('app.color.color_CCCCCC'))
  295 + .fontSize($r('app.float.font_size_12'))
  296 + .lineHeight($r('app.float.margin_16'))
  297 + .margin({ top: $r('app.float.margin_16')
  298 + ,left: $r('app.float.margin_16')
  299 + ,right: $r('app.float.margin_16') })
  300 + //微信/朋友圈/微博
  301 + Row(){
  302 + Image($r('app.media.xxhdpi_pic_wechat'))
  303 + .width($r('app.float.margin_116'))
  304 + .height($r('app.float.margin_36'))
  305 + .objectFit(ImageFit.Cover)
  306 + Image($r('app.media.xxhdpi_pic_pyq'))
  307 + .width($r('app.float.margin_116'))
  308 + .height($r('app.float.margin_36'))
  309 + .margin({ left: $r('app.float.margin_4_negative')})
  310 + .objectFit(ImageFit.Cover)
  311 + Image($r('app.media.xxhdpi_pic_wb'))
  312 + .width($r('app.float.margin_116'))
  313 + .height($r('app.float.margin_36'))
  314 + .margin({ left: $r('app.float.margin_4_negative')})
  315 + .objectFit(ImageFit.Cover)
  316 + }
  317 + .margin({ top: $r('app.float.margin_24')})
  318 + //点赞
  319 + Row(){
  320 + Image($r('app.media.icon_like_selected_redheart'))
  321 + .width($r('app.float.margin_24'))
  322 + .height($r('app.float.margin_24'))
  323 + .objectFit(ImageFit.Cover)
  324 + Text("2.6万")
  325 + .fontColor($r('app.color.color_999999'))
  326 + .fontSize($r('app.float.font_size_16'))
  327 + .lineHeight($r('app.float.margin_20'))
  328 + .margin({ left: $r('app.float.margin_2')})
  329 + }
  330 + .margin({top:$r('app.float.margin_16')})
  331 + //fixme 评论组件
279 } 332 }
280 - .margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})  
281 - .onClick((event: ClickEvent) => {  
282 - this.mJumpInfo.objectType = ContentConstants.TYPE_VOD;  
283 - ProcessUtils.processPage(this.mJumpInfo)  
284 - })  
285 } 333 }
286 - }  
287 - //特别声明  
288 - Text("特别声明：本文为人民日报新媒体平台“人民号”作者上传并发布，仅代表作者观点。人民日报仅提供信息发布平台。")  
289 - .fontColor($r('app.color.color_CCCCCC'))  
290 - .fontSize($r('app.float.font_size_12'))  
291 - .lineHeight($r('app.float.margin_16'))  
292 - .margin({ top: $r('app.float.margin_16')  
293 - ,left: $r('app.float.margin_16')  
294 - ,right: $r('app.float.margin_16') })  
295 - //微信/朋友圈/微博  
296 - Row(){  
297 - Image($r('app.media.xxhdpi_pic_wechat'))  
298 - .width($r('app.float.margin_116'))  
299 - .height($r('app.float.margin_36'))  
300 - .objectFit(ImageFit.Cover)  
301 - Image($r('app.media.xxhdpi_pic_pyq'))  
302 - .width($r('app.float.margin_116'))  
303 - .height($r('app.float.margin_36'))  
304 - .margin({ left: $r('app.float.margin_4_negative')})  
305 - .objectFit(ImageFit.Cover)  
306 - Image($r('app.media.xxhdpi_pic_wb'))  
307 - .width($r('app.float.margin_116'))  
308 - .height($r('app.float.margin_36'))  
309 - .margin({ left: $r('app.float.margin_4_negative')})  
310 - .objectFit(ImageFit.Cover)  
311 - }  
312 - .margin({ top: $r('app.float.margin_24')})  
313 - //点赞  
314 - Row(){  
315 - Image($r('app.media.icon_like_selected_redheart'))  
316 - .width($r('app.float.margin_24'))  
317 - .height($r('app.float.margin_24'))  
318 - .objectFit(ImageFit.Cover)  
319 - Text("2.6万")  
320 - .fontColor($r('app.color.color_999999'))  
321 - .fontSize($r('app.float.font_size_16'))  
322 - .lineHeight($r('app.float.margin_20'))  
323 - .margin({ left: $r('app.float.margin_2')})  
324 - }  
325 - //评论组件/底部组件 334 + .width(CommonConstants.FULL_WIDTH)
  335 + .height(CommonConstants.FULL_HEIGHT)
  336 + .padding({ bottom: 76 })
  337 + .scrollBar(BarState.Off)
  338 + .alignSelf(ItemAlign.Start)
  339 + //底部交互区
  340 + Row() {
  341 + Image($r('app.media.icon_arrow_left'))
  342 + .width(24)
  343 + .height(24)
  344 + .onClick((event: ClickEvent) => {
  345 + router.back()
  346 + })
  347 +
  348 + Row() {
  349 + Image($r('app.media.icon_comment'))
  350 + .width(24)
  351 + .height(24)
  352 + .margin({ right: 24 })
  353 + .id('comment')
326 354
  355 + Image($r('app.media.icon_star'))
  356 + .width(24)
  357 + .height(24)
  358 + .margin({ right: 24 })
  359 +
  360 + Image($r('app.media.icon_listen'))
  361 + .width(24)
  362 + .height(24)
  363 + .margin({ right: 24 })
  364 +
  365 + Image($r('app.media.icon_forward'))
  366 + .width(24)
  367 + .height(24)
  368 +
  369 + }
  370 + }
  371 + .width(CommonConstants.FULL_WIDTH)
  372 + .height(56)
  373 + .padding({ left: 15, right: 15, bottom: 50, top: 20 })
  374 + .justifyContent(FlexAlign.SpaceBetween)
  375 + .backgroundColor(Color.White)
  376 + }
327 } 377 }
328 .alignSelf(ItemAlign.Start) 378 .alignSelf(ItemAlign.Start)
329 - }  
330 - .backgroundColor('#FFFFFFFF')  
331 - .width('100%')  
332 - .height('100%') 379 + .backgroundColor('#FFFFFFFF')
  380 + .width('100%')
  381 + .height('100%')
333 } 382 }
334 /** 383 /**
335 * 请求（动态）详情页数据 384 * 请求（动态）详情页数据