JackLee/OpenCAX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

确定基本布局

Browse Source
This commit is contained in:
JackLee 2026-02-15 22:39:43 +08:00
parent 8be4df4714
commit d29c7228c5
2 changed files with 111 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
entry/src/main/ets/pages/rowBtnTab.ets
View File

@ -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 }) {
//迭代生成垂直布局中的行布局
ForEach(this.rowsBtn, (rowBtn: RowBtn, index: number) => {
//每一行的布局
//垂直布局展示多行
Column({ space: 0 }) {
//迭代生成行容器
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(){
ForEach(rowBtn.btnGroup,(btn:ToolButton|Array<ToolButton>, index: number)=>{
Row() {
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: 0,left:0,bottom:0,right:0})
}
Column(){
Text(rowBtn.str)
}.margin({ top: 2, left: 2, bottom: 0, right: 2})
Row() {
Text(rowGroup.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)
.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})
}
}

64
entry/src/main/ets/pages/titleTab.ets
View File

@ -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:'新建',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:[]},
@ -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)