确定基本布局

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,48 +88,60 @@ 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(){
-          Column({ space: 5 }) {
+          ForEach(rowBtn, (rowGroup: RowBtn, index: number) => {
-            //Group的按钮组
+            Row(){
-            Column(){
+              Column({ space: 5 }) {
-              //每个Group和非Group的横向布局
+                //Group的按钮组
-              Row(){
+                Column({ space: 1 }) {
-                ForEach(rowBtn.btnGroup,(btn:ToolButton|Array<ToolButton>, index: number)=>{
+                  //每个Group和非Group的横向布局
-                  if (Array.isArray(btn)) {
+                  Row() {
-                    if ((btn as Array<ToolButton>).length > 0) {
+                    ForEach(rowGroup.btnGroup, (btn: ToolButton | Array<ToolButton>, index: number) => {
-                      Button((btn as Array<ToolButton>)[0].str)
+                      if (Array.isArray(btn)) {
-                        .bindMenu(this.ToolsMenu((btn as Array<ToolButton>)))
+                        if ((btn as Array<ToolButton>).length > 0) {
-                        .height('50')
+                          Button((btn as Array<ToolButton>)[0].str)
-                        .width('50')
+                            .bindMenu(this.ToolsMenu((btn as Array<ToolButton>)))
-                        .padding('1')
+                            .height('50')
-                        .type(ButtonType.Normal)
+                            .width('50')
-                    }
+                            .padding('1')
+                            .type(ButtonType.Normal)
+                        }
+                      } else {
+                        this.TButton((btn as ToolButton).icon, (btn as ToolButton).str);
+                      }
+                    })
+                  }.margin({ top: 2, left: 2, bottom: 0, right: 2})
+                  Row() {
+                    Text(rowGroup.str)
+                      .fontSize(8)
+                      .fontColor(Color.Gray)
+                    Button('X')
+                      .fontColor(Color.Gray)
+                      .fontSize(8)
+                      .height(12)
+                      .width(8)
+                      .padding(1)
+                      .type(ButtonType.Normal)
+                      .bindMenu(this.XMenu(groupMenu))
+                      .align(Alignment.BottomEnd)
+                      .backgroundColor(Color.Transparent)
                   }
-                  else
+                }.margin({ top: 1,left:1,bottom:1,right:1})
-                  {
+              }
-                    this.TButton((btn as ToolButton).icon, (btn as ToolButton).str);
+            }.margin({ top: 1,left:1,bottom:1,right:1})
-                  }
+            .borderWidth('1')
-                })
+            .borderRadius(5)
-              }.padding('1')
+            .borderColor(Color.Gray)
-              .margin({ top: 0,left:0,bottom:0,right:0})
+          })
-            }
+          //设置尾部的按钮
-
+          Row(){
-            Column(){
+            Button('X')
-              Text(rowBtn.str)
-                .fontSize(8)
-                .fontColor(Color.Gray)
-            }.padding('1')
-          }.margin({ top: 0,left:0,bottom:0,right:0})
-          .padding('1')
-          Column(){
-             Button('X')
               .fontColor(Color.Gray)
               .fontSize(8)
               .width(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,32 +26,57 @@ 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:[]},
   {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)