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

import { hilog } from '@kit.PerformanceAnalysisKit';
import { ArrayList } from '@kit.ArkTS';
import { AddFormMenuItem } from '@ohos.arkui.advanced.FormMenu';
import {ToolButton,BtnRowTab}from './btnRowTab'
import { SceneResourceType } from '@kit.ArkGraphics3D';

const DOMAIN = 0x0000;

class TitleTabName {
  //标题
  str: string='';
  //图标名
  icon: string='';
  //页面名
  page:string='';
  //提示
  tips:string='';
  //Content的内容
  rowsBtn:Array<Array<ToolButton|Array<ToolButton>>>=new Array<Array<ToolButton|Array<ToolButton>>>;
}

//测试数据
let testPagInfo:Array<TitleTabName>=[
   //第一个tab
  {str:'文件',icon:'',page:'',tips:'',rowsBtn:[]},
  //第二个tab
  {str:'主页',icon:'',page:'',tips:'',rowsBtn:[
    //第一行按钮组
    [
      //第一个按钮
      {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:'延申曲线',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:'',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
export struct TitleTab {
  titleBarTabsName:Array<TitleTabName>=new Array<TitleTabName>;
  //顶部导航组件
  private titleBarTabs: TabsController = new TabsController();
  //当前的顶部导航选择页
  @State titleBarFocusIndex: number = 0;
  @State titleBarDefaultFocusIndex: number = 1;
  LoadData(): void {
    this.titleBarTabsName=testPagInfo;
  }
  aboutToAppear() {
    this.LoadData();
  }

  build() {
    Flex({ direction: FlexDirection.Column }){
      Scroll() {
        Row() {
          ForEach(this.titleBarTabsName, (item: TitleTabName, index: number) => {
            Row({ space: 1 }) {
               Button(item.str)
                 .fontWeight(index === this.titleBarFocusIndex ? FontWeight.Bold : FontWeight.Normal)
                 .height(25)
                 .width(60)
                 .padding(5)
                 .type(ButtonType.Normal)
            }.onClick(() => {
               if(index!=0){
                 this.titleBarTabs.changeIndex(index);
                 this.titleBarFocusIndex = index;
               }else{
                 this.titleBarTabs.changeIndex(this.titleBarDefaultFocusIndex);
                 this.titleBarFocusIndex = this.titleBarDefaultFocusIndex;
               }
             })
          })
        }
      }
      .align(Alignment.Start)
      .scrollable(ScrollDirection.Horizontal)
      .scrollBar(BarState.Off)
      .margin({ top: 2,left:2,bottom:2,right:2})
      .width('100%')
      Tabs({barPosition: BarPosition.Start, index: this.titleBarDefaultFocusIndex,controller: this.titleBarTabs}){
        ForEach(this.titleBarTabsName,(item:TitleTabName, index: number)=>{
          TabContent() {
            BtnRowTab({rowsBtn:item.rowsBtn});
          }.align(Alignment.Start)
           .margin({ top: 2,left:2,bottom:2,right:2})
        })
      }.barHeight(0)
       .margin({ top: 2,left:2,bottom:2,right:2})
       .height('auto')
       .barMode(BarMode.Fixed)
    }.borderWidth('1')
     .height('auto')
  }
}