多图（图集）详情页评论点赞组件开发

@@ -79,8 +79,7 @@ export struct MultiPictureDetailPageComponent {
         bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
         middle: { anchor: "__container__", align: HorizontalAlign.Center }
       })
-      .width('100%')
-      .height(56)
+      .width('100%').height(56).margin(16)
       .border({ width: {top: 0.5}, color: '#FFFFFF' })
       .id('e_oper_row')
     }

@@ -8,10 +8,16 @@ export interface OperationItem {
 
 const TAG = 'OperRowListView';
 
+@Preview
 @Component
 export struct OperRowListView {
   @State operationList: OperationItem[] = [
     {
+      icon: $r('app.media.ic_comment'),
+      text: "评论",
+      num: 500,
+    },
+    {
       icon: $r('app.media.ic_like_uncheck'),
       text: "点赞",
       num: 6622
@@ -22,11 +28,6 @@ export struct OperRowListView {
       num: 662,
     },
     {
-      icon: $r('app.media.ic_comment'),
-      text: "评论",
-      num: 500,
-    },
-    {
       icon: $r('app.media.ic_share'),
       text: "分享"
     }
@@ -36,16 +37,55 @@ export struct OperRowListView {
   }
 
   build() {
-
-    Row() {
-      ForEach(this.operationList, (item: OperationItem, index: number) => {
-        this.buildOperationItem(item, index)
-      }, (item: OperationItem, index: number) => JSON.stringify(item))
+    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems:ItemAlign.Center }){
+      Row() {
+        Column() {
+          Image($r('app.media.icon_arrow_left_white'))
+            .width(24)
+            .height(24)
+            .aspectRatio(1)
+        }
+        .margin({
+          top: 0,
+          left: 8,
+          right: 8,
+          bottom: 0
+        })
+        .alignItems(HorizontalAlign.Center)
+        .hoverEffect(HoverEffect.Scale)
+        .onClick((event: ClickEvent) => {
+          ToastUtils.showToast('体验版，本功能暂未开发', 1000);
+        })
+        TextInput({placeholder:'说两句...'})
+          .placeholderColor('#999999')
+          .placeholderFont(
+            {
+              size: 12,
+              weight: 400,
+              family: 'PingFang SC-Regular'
+            }
+          )
+          .caretColor('#1A1A1A')
+          .backgroundColor('#1A1A1A')
+          .width('61.5%')
+          .height(30)
+          .borderRadius(0)
+      }
+      .width('45.5%')
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.Start)
+      Row() {
+        ForEach(this.operationList, (item: OperationItem, index: number) => {
+          this.buildOperationItem(item, index)
+        }, (item: OperationItem, index: number) => JSON.stringify(item))
+      }
+      .width('54.5%')
+      .alignItems(VerticalAlign.Center)
+      .justifyContent(FlexAlign.Center)
     }
     .width('100%')
-    .height('100%')
-    .alignItems(VerticalAlign.Center)
-    .justifyContent(FlexAlign.Center)
+    .height(56)
+    .backgroundColor(Color.Black)
   }
 
   /**
@@ -68,5 +108,6 @@ export struct OperRowListView {
       Logger.info(TAG, `buildOperationItem onClick event index: ${index}`);
       ToastUtils.showToast('体验版，本功能暂未开发', 1000);
     })
+    .width('19%')
   }
 }
\ No newline at end of file