确定基本布局

entry/src/main/ets/pages/rowBtnTab.ets

@@ -21,18 +21,25 @@ class XMenu{
   icon:string=''
   event:string=''
 }
-let xMenu:Array<XMenu>=[
+
+let groupMenu:Array<XMenu>=[
   {str:'增功能',icon:'',event:''},
   {str:'编辑组',icon:'',event:''},
   {str:'改图标',icon:'',event:''},
   {str:'重命名',icon:'',event:''},
   {str:'移动到->',icon:'',event:''}
 ]
+let rowMenu:Array<XMenu>=[
+  {str:'增加功能组',icon:'',event:''},
+  {str:'编辑功能组',icon:'',event:''},
+  {str:'修改功能组',icon:'',event:''},
+  {str:'命名功能组',icon:'',event:''},
+  {str:'移动功能组',icon:'',event:''}
+]
 @ComponentV2
 export struct RowBtnTab {
-  @Param rowsBtn: Array<RowBtn> = new Array<RowBtn>;
+  @Param rowsBtn: Array<Array<RowBtn>> = new Array<Array<RowBtn>>;
   @Param rightBtn: Array<ToolButton | Array<ToolButton>> = new Array<ToolButton | Array<ToolButton>>;
-
   @Builder
   ToolsMenu(menus: Array<ToolButton>) {
     Menu() {
@@ -48,7 +55,6 @@ export struct RowBtnTab {
       })
     }
   }
-
   @Builder
   TButton(strIcon: string, strName: string) {
     Column() {
@@ -67,7 +73,6 @@ export struct RowBtnTab {
     .width('50')
     .padding('1')
   }
-
   @Builder
   XMenu(menus: Array<XMenu>) {
     Menu() {
@@ -83,20 +88,21 @@ export struct RowBtnTab {
       })
     }
   }
-
   build() {
-    //单页的TabContent布局.垂直布局
+    //垂直布局展示多行
-    Column({ space: 2 }) {
+    Column({ space: 0 }) {
-      //迭代生成垂直布局中的行布局
+      //迭代生成行容器
-      ForEach(this.rowsBtn, (rowBtn: RowBtn, index: number) => {
+      ForEach(this.rowsBtn, (rowBtn: Array<Array<RowBtn>>, index: number) => {
-        //每一行的布局
+        //行的按钮组容器
+        Row(){
+          ForEach(rowBtn, (rowGroup: RowBtn, index: number) => {
             Row(){
               Column({ space: 5 }) {
                 //Group的按钮组
-            Column(){
+                Column({ space: 1 }) {
                   //每个Group和非Group的横向布局
-              Row(){
+                  Row() {
-                ForEach(rowBtn.btnGroup,(btn:ToolButton|Array<ToolButton>, index: number)=>{
+                    ForEach(rowGroup.btnGroup, (btn: ToolButton | Array<ToolButton>, index: number) => {
                       if (Array.isArray(btn)) {
                         if ((btn as Array<ToolButton>).length > 0) {
                           Button((btn as Array<ToolButton>)[0].str)
@@ -106,24 +112,35 @@ export struct RowBtnTab {
                             .padding('1')
                             .type(ButtonType.Normal)
                         }
-                  }
+                      } else {
-                  else
-                  {
                         this.TButton((btn as ToolButton).icon, (btn as ToolButton).str);
                       }
                     })
-              }.padding('1')
+                  }.margin({ top: 2, left: 2, bottom: 0, right: 2})
-              .margin({ top: 0,left:0,bottom:0,right:0})
+                  Row() {
-            }
+                    Text(rowGroup.str)
-
-            Column(){
-              Text(rowBtn.str)
                       .fontSize(8)
                       .fontColor(Color.Gray)
-            }.padding('1')
+                    Button('X')
-          }.margin({ top: 0,left:0,bottom:0,right:0})
+                      .fontColor(Color.Gray)
-          .padding('1')
+                      .fontSize(8)
-          Column(){
+                      .height(12)
+                      .width(8)
+                      .padding(1)
+                      .type(ButtonType.Normal)
+                      .bindMenu(this.XMenu(groupMenu))
+                      .align(Alignment.BottomEnd)
+                      .backgroundColor(Color.Transparent)
+                  }
+                }.margin({ top: 1,left:1,bottom:1,right:1})
+              }
+            }.margin({ top: 1,left:1,bottom:1,right:1})
+            .borderWidth('1')
+            .borderRadius(5)
+            .borderColor(Color.Gray)
+          })
+          //设置尾部的按钮
+          Row(){
             Button('X')
               .fontColor(Color.Gray)
               .fontSize(8)
@@ -132,12 +149,14 @@ export struct RowBtnTab {
               .padding(1)
               .type(ButtonType.Normal)
               .align(Alignment.BottomEnd)
-              .bindMenu(this.XMenu(xMenu))
+              .bindMenu(this.XMenu(rowMenu))
               .backgroundColor(Color.Transparent)
           }
-        }.borderWidth('1')
-        .borderRadius(5)
-      })
         }
+         .width('100%')
+         .align(Alignment.BottomEnd)
+         .borderColor(Color.Gray)
+      })
+    }.margin({ top: 1,left:1,bottom:5,right:1})
   }
 }

entry/src/main/ets/pages/titleTab.ets

@@ -17,7 +17,7 @@ class TitleTabName {
   //提示
   tips:string='';
   //Content的内容
-  rowsBtn:Array<RowBtn>=new Array<RowBtn>;
+  rowsBtn:Array<Array<RowBtn>>=new Array<Array<RowBtn>>;
 }
 
 //测试数据
@@ -26,31 +26,56 @@ let testPagInfo:Array<TitleTabName>=[
   {str:'文件',icon:'',page:'',tips:'',rowsBtn:[]},
   //第二个tab
   {str:'主页',icon:'',page:'',tips:'',rowsBtn:[
-    //第一行按钮
+    [//第一行按钮
-    { str:'操作',btnGroup:[
+    { str:'1行功能组-A',btnGroup:[
-        {str:'新建',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
-        {str:'打开',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
          [
-           {str:'转换',icon:'',tips:'',event:''} as ToolButton,
+           {str:'测试',icon:'',tips:'',event:''} as ToolButton,
-           {str:'功能1',icon:'',tips:'',event:''} as ToolButton,
+           {str:'测试',icon:'',tips:'',event:''} as ToolButton,
-           {str:'功能2',icon:'',tips:'',event:''} as ToolButton,
+           {str:'测试',icon:'',tips:'',event:''} as ToolButton,
-           {str:'功能3',icon:'',tips:'',event:''} as ToolButton,
+           {str:'测试',icon:'',tips:'',event:''} as ToolButton,
          ],
-        {str:'设置',icon:'',tips:'',event:''} as ToolButton,
       ],
     },
-    { str:'操作',btnGroup:[
+    { str:'1行功能组-B',btnGroup:[
-      {str:'重置',icon:'',tips:'',event:''} as ToolButton,
+      {str:'测试',icon:'',tips:'',event:''} as ToolButton,
-      {str:'删除',icon:'',tips:'',event:''} as ToolButton,
+      {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+      {str:'测试',icon:'',tips:'',event:''} as ToolButton,
       [
-        {str:'格式',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
-        {str:'功能1',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
-        {str:'功能2',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
-        {str:'功能3',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
       ],
-      {str:'设置',icon:'',tips:'',event:''} as ToolButton,
+    ]}
     ],
-    }
+    [//第二行按钮
+      { str:'二行功能组-A',btnGroup:[
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+        [
+          {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+          {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+          {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+          {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+        ],
+      ],
+      },
+      { str:'测试',btnGroup:[
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+        {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+        [
+          {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+          {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+          {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+          {str:'测试',icon:'',tips:'',event:''} as ToolButton,
+        ],
+      ]}
+    ]
   ]
   },
   {str:'曲线',icon:'',page:'',tips:'',rowsBtn:[]},
@@ -114,7 +139,6 @@ export struct TitleTab {
             RowBtnTab({rowsBtn:item.rowsBtn})
           }.align(Alignment.Start)
            .padding(1)
-           .borderWidth('1')
            .margin({ top: 0,left:0,bottom:2,right:0})
         })
       }.barHeight(0)