补充布局

2026-02-15 21:37:46 +08:00 · 2026-02-15 21:37:46 +08:00 · 8be4df4714
commit 8be4df4714
parent b16fc67aa9
3 changed files with 176 additions and 139 deletions
--- a/entry/src/main/ets/pages/btnRowTab.ets
+++ b/entry/src/main/ets/pages/btnRowTab.ets
@ -1,79 +0,0 @@
-import { hilog } from '@kit.PerformanceAnalysisKit';
-
-export class ToolButton{
-  //功能
-  str:string='';
-  //图标
-  icon:string='';
-  //按钮提示
-  tips:string='';
-  //事件
-  event:string='';
-}
-
-@ComponentV2
-export struct BtnRowTab {
-  @Param rowsBtn: Array<Array<ToolButton|Array<ToolButton>>>=new Array<Array<ToolButton|Array<ToolButton>>>;
-  @Param rightBtn:Array<ToolButton|Array<ToolButton>>=new Array<ToolButton|Array<ToolButton>>;
-  @Builder
-  ToolsMenu(menus:Array<ToolButton>) {
-     Menu() {
-       ForEach(menus,(item:ToolButton, index: number)=>{
-         MenuItem({ startIcon: $r('app.media.startIcon'), content: item.str })
-           .width('150')
-           .margin({ top: 2,left:2,bottom:2,right:2})
-       })
-     }
-  }
-  @Builder
-  TButton(strIcon:string,strName:string){
-    Column(){
-      // 请将$r('app.media.loading')替换为实际资源文件
-      Image($r('app.media.startIcon'))
-        .width(50)
-        .height(40)
-        .objectFit(ImageFit.Contain)
-      Text(strName)
-        .fontSize(12)
-        .width(50)
-        .height(10)
-        .textAlign(TextAlign.Center)
-    }
-    .height('50')
-    .width('50')
-    .padding('1')
-  }
-  build() {
-    Column({space: 5}){
-      ForEach(this.rowsBtn,(rowBtn:Array<ToolButton|Array<ToolButton>>, index: number)=>{
-        Row({ space: 2 }) {
-          ForEach(rowBtn,(btn:ToolButton|Array<ToolButton>, index: number)=>{
-            if (Array.isArray(btn)) {
-              if(( btn as Array<ToolButton>).length>0){
-                Button(( btn as Array<ToolButton>)[0].str)
-                  .bindMenu(this.ToolsMenu(( btn as Array<ToolButton>)))
-                  .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:2,right:2})
-     .padding('1')
-     .onMouse((event: MouseEvent) => {
-         if (event) {
-           // 鼠标右键菜单事件
-           switch (event.button) {
-             case MouseButton.Right:
-
-               break;
-           }
-         }
-     })
-  }
-}
--- a/entry/src/main/ets/pages/rowBtnTab.ets
+++ b/entry/src/main/ets/pages/rowBtnTab.ets
@ -0,0 +1,143 @@
+import { hilog } from '@kit.PerformanceAnalysisKit';
+
+export class ToolButton{
+  //功能
+  str:string='';
+  //图标
+  icon:string='';
+  //按钮提示
+  tips:string='';
+  //事件
+  event:string='';
+}
+
+export class RowBtn{
+  str:string=''
+  btnGroup:Array<ToolButton|Array<ToolButton>>=new Array<ToolButton|Array<ToolButton>>
+}
+
+class XMenu{
+  str:string=''
+  icon:string=''
+  event:string=''
+}
+let xMenu: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 rightBtn: Array<ToolButton | Array<ToolButton>> = new Array<ToolButton | Array<ToolButton>>;
+
+  @Builder
+  ToolsMenu(menus: Array<ToolButton>) {
+    Menu() {
+      ForEach(menus, (item: ToolButton, index: number) => {
+        MenuItem({ startIcon: $r('app.media.startIcon'), content: item.str })
+          .width('150')
+          .margin({
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0
+          })
+      })
+    }
+  }
+
+  @Builder
+  TButton(strIcon: string, strName: string) {
+    Column() {
+      // 请将$r('app.media.loading')替换为实际资源文件
+      Image($r('app.media.startIcon'))
+        .width(50)
+        .height(40)
+        .objectFit(ImageFit.Contain)
+      Text(strName)
+        .fontSize(12)
+        .width(50)
+        .height(10)
+        .textAlign(TextAlign.Center)
+    }
+    .height('50')
+    .width('50')
+    .padding('1')
+  }
+
+  @Builder
+  XMenu(menus: Array<XMenu>) {
+    Menu() {
+      ForEach(menus, (item: ToolButton, index: number) => {
+        MenuItem({ startIcon: $r('app.media.startIcon'), content: item.str })
+          .width('150')
+          .margin({
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0
+          })
+      })
+    }
+  }
+
+  build() {
+    //单页的TabContent布局.垂直布局
+    Column({ space: 2 }) {
+      //迭代生成垂直布局中的行布局
+      ForEach(this.rowsBtn, (rowBtn: RowBtn, index: number) => {
+        //每一行的布局
+        Row(){
+          Column({ space: 5 }) {
+            //Group的按钮组
+            Column(){
+              //每个Group和非Group的横向布局
+              Row(){
+                ForEach(rowBtn.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)
+                        .bindMenu(this.ToolsMenu((btn as Array<ToolButton>)))
+                        .height('50')
+                        .width('50')
+                        .padding('1')
+                        .type(ButtonType.Normal)
+                    }
+                  }
+                  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')
+              .fontColor(Color.Gray)
+              .fontSize(8)
+              .width(8)
+              .height(70)
+              .padding(1)
+              .type(ButtonType.Normal)
+              .align(Alignment.BottomEnd)
+              .bindMenu(this.XMenu(xMenu))
+              .backgroundColor(Color.Transparent)
+          }
+        }.borderWidth('1')
+        .borderRadius(5)
+      })
+    }
+  }
+}
--- a/entry/src/main/ets/pages/titleTab.ets
+++ b/entry/src/main/ets/pages/titleTab.ets
@ -1,11 +1,12 @@
 import { hilog } from '@kit.PerformanceAnalysisKit';
 import { ArrayList } from '@kit.ArkTS';
 import { AddFormMenuItem } from '@ohos.arkui.advanced.FormMenu';
-import {ToolButton,BtnRowTab}from './btnRowTab'
+import {ToolButton,RowBtnTab,RowBtn}from './rowBtnTab'
 import { SceneResourceType } from '@kit.ArkGraphics3D';

 const DOMAIN = 0x0000;

+
 class TitleTabName {
  //标题
  str: string='';
@ -16,7 +17,7 @@ class TitleTabName {
  //提示
  tips:string='';
  //Content的内容
-  rowsBtn:Array<Array<ToolButton|Array<ToolButton>>>=new Array<Array<ToolButton|Array<ToolButton>>>;
+  rowsBtn:Array<RowBtn>=new Array<RowBtn>;
 }

 //测试数据
@ -25,72 +26,42 @@ 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:'功能',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,
-      ] as Array<ToolButton>,
-      {str:'设置',icon:'',tips:'',event:''} as ToolButton,
-    ] as Array<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,
-      ] as Array<ToolButton>,
-      {str:'删除',icon:'',tips:'',event:''} as ToolButton,
-    ] as Array<ToolButton>,
-  ]},
-  {str:'曲线',icon:'',page:'',tips:'',rowsBtn:[
-    [
-      [
-       {str:'文本',icon:'',tips:'',event:''} as ToolButton,
-       {str:'点',icon:'',tips:'',event:''} as ToolButton,
-       {str:'直线',icon:'',tips:'',event:''} as ToolButton,
-       {str:'圆弧/圆',icon:'',tips:'',event:''} as ToolButton,
-      ] as Array<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,
-      ] as Array<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:'功能2',icon:'',tips:'',event:''} as ToolButton,
+        {str:'功能3',icon:'',tips:'',event:''} as ToolButton,
+      ],
+      {str:'设置',icon:'',tips:'',event:''} as ToolButton,
+    ],
+    }
    ]
-  ]},
+  },
+  {str:'曲线',icon:'',page:'',tips:'',rowsBtn:[]},
  {str:'曲面',icon:'',page:'',tips:'',rowsBtn:[]},
  {str:'装配',icon:'',page:'',tips:'',rowsBtn:[]},
-  {str:'多边建模',icon:'',page:'',tips:'',rowsBtn:[]},
+  {str:'多边形建模',icon:'',page:'',tips:'',rowsBtn:[]},
  {str:'分析',icon:'',page:'',tips:'',rowsBtn:[]},
  {str:'选择',icon:'',page:'',tips:'',rowsBtn:[]},
  {str:'显示',icon:'',page:'',tips:'',rowsBtn:[]},
  {str:'工具',icon:'',page:'',tips:'',rowsBtn:[]},
  {str:'应用模块',icon:'',page:'',tips:'',rowsBtn:[]},
-  {str:'设置',icon:'',page:'',tips:'',rowsBtn:[]},
-  {str:'帮助',icon:'',page:'',tips:'',rowsBtn:[]},
-  {str:'关于',icon:'',page:'',tips:'',rowsBtn:[]},
 ]

@Component
@ -140,12 +111,14 @@ export struct TitleTab {
      Tabs({barPosition: BarPosition.Start, index: this.titleBarDefaultFocusIndex,controller: this.titleBarTabs}){
        ForEach(this.titleBarTabsName,(item:TitleTabName, index: number)=>{
          TabContent() {
-            BtnRowTab({rowsBtn:item.rowsBtn});
+            RowBtnTab({rowsBtn:item.rowsBtn})
          }.align(Alignment.Start)
-           .margin({ top: 2,left:2,bottom:2,right:2})
+           .padding(1)
+           .borderWidth('1')
+           .margin({ top: 0,left:0,bottom:2,right:0})
        })
      }.barHeight(0)
-       .margin({ top: 2,left:2,bottom:2,right:2})
+       .margin({ top: 0,left:0,bottom:0,right:0})
       .height('auto')
       .barMode(BarMode.Fixed)
    }.borderWidth('1')