diff --git a/entry/src/main/ets/pages/rowBtnTab.ets b/entry/src/main/ets/pages/rowBtnTab.ets index 21675921..5e4e0ff4 100644 --- a/entry/src/main/ets/pages/rowBtnTab.ets +++ b/entry/src/main/ets/pages/rowBtnTab.ets @@ -21,18 +21,25 @@ class XMenu{ icon:string='' event:string='' } -let xMenu:Array=[ + +let groupMenu:Array=[ {str:'增功能',icon:'',event:''}, {str:'编辑组',icon:'',event:''}, {str:'改图标',icon:'',event:''}, {str:'重命名',icon:'',event:''}, {str:'移动到->',icon:'',event:''} ] +let rowMenu:Array=[ + {str:'增加功能组',icon:'',event:''}, + {str:'编辑功能组',icon:'',event:''}, + {str:'修改功能组',icon:'',event:''}, + {str:'命名功能组',icon:'',event:''}, + {str:'移动功能组',icon:'',event:''} +] @ComponentV2 export struct RowBtnTab { - @Param rowsBtn: Array = new Array; + @Param rowsBtn: Array> = new Array>; @Param rightBtn: Array> = new Array>; - @Builder ToolsMenu(menus: Array) { 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) { Menu() { @@ -83,48 +88,60 @@ export struct RowBtnTab { }) } } - build() { - //单页的TabContent布局.垂直布局 - Column({ space: 2 }) { - //迭代生成垂直布局中的行布局 - ForEach(this.rowsBtn, (rowBtn: RowBtn, index: number) => { - //每一行的布局 + //垂直布局展示多行 + Column({ space: 0 }) { + //迭代生成行容器 + ForEach(this.rowsBtn, (rowBtn: Array>, index: number) => { + //行的按钮组容器 Row(){ - Column({ space: 5 }) { - //Group的按钮组 - Column(){ - //每个Group和非Group的横向布局 - Row(){ - ForEach(rowBtn.btnGroup,(btn:ToolButton|Array, index: number)=>{ - if (Array.isArray(btn)) { - if ((btn as Array).length > 0) { - Button((btn as Array)[0].str) - .bindMenu(this.ToolsMenu((btn as Array))) - .height('50') - .width('50') - .padding('1') - .type(ButtonType.Normal) - } + ForEach(rowBtn, (rowGroup: RowBtn, index: number) => { + Row(){ + Column({ space: 5 }) { + //Group的按钮组 + Column({ space: 1 }) { + //每个Group和非Group的横向布局 + Row() { + ForEach(rowGroup.btnGroup, (btn: ToolButton | Array, index: number) => { + if (Array.isArray(btn)) { + if ((btn as Array).length > 0) { + Button((btn as Array)[0].str) + .bindMenu(this.ToolsMenu((btn as Array))) + .height('50') + .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 - { - this.TButton((btn as ToolButton).icon, (btn as ToolButton).str); - } - }) - }.padding('1') - .margin({ top: 0,left:0,bottom:0,right:0}) - } - - Column(){ - Text(rowBtn.str) - .fontSize(8) - .fontColor(Color.Gray) - }.padding('1') - }.margin({ top: 0,left:0,bottom:0,right:0}) - .padding('1') - Column(){ - Button('X') + }.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) .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}) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/titleTab.ets b/entry/src/main/ets/pages/titleTab.ets index e0670ce8..ab6be064 100644 --- a/entry/src/main/ets/pages/titleTab.ets +++ b/entry/src/main/ets/pages/titleTab.ets @@ -17,7 +17,7 @@ class TitleTabName { //提示 tips:string=''; //Content的内容 - rowsBtn:Array=new Array; + rowsBtn:Array>=new Array>; } //测试数据 @@ -26,32 +26,57 @@ let testPagInfo:Array=[ {str:'文件',icon:'',page:'',tips:'',rowsBtn:[]}, //第二个tab {str:'主页',icon:'',page:'',tips:'',rowsBtn:[ - //第一行按钮 - { str:'操作',btnGroup:[ - {str:'新建',icon:'',tips:'',event:''} as ToolButton, - {str:'打开',icon:'',tips:'',event:''} as ToolButton, + [//第一行按钮 + { 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:'功能1',icon:'',tips:'',event:''} as ToolButton, - {str:'功能2',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:'测试',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:'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:'功能1',icon:'',tips:'',event:''} as ToolButton, - {str:'功能2',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:'测试',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)