From f18781fadd08372945b1188577e2d572b98e9693 Mon Sep 17 00:00:00 2001 From: JackLee <809262979@qq.com> Date: Thu, 19 Mar 2026 16:44:36 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B7=A6=E8=BE=B9=E6=A0=8F?= =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- entry/src/main/ets/pages/Index.ets | 32 +++++++- ...eftSideLayout.ets => LeftSideAssembly.ets} | 0 .../LeftSideLayout/LeftSideComponent.ets | 76 +++++++++++++++++++ .../LeftSideLayout/LeftSideConstraint.ets | 0 .../{ => LeftSideLayout}/LeftSideTab.ets | 26 ++++--- .../main/ets/pages/TitleLayout/TitleTab.ets | 8 +- oh-package-lock.json5 | 8 ++ oh-package.json5 | 6 +- 8 files changed, 140 insertions(+), 16 deletions(-) rename entry/src/main/ets/pages/LeftSideLayout/{LeftSideLayout.ets => LeftSideAssembly.ets} (100%) create mode 100644 entry/src/main/ets/pages/LeftSideLayout/LeftSideComponent.ets create mode 100644 entry/src/main/ets/pages/LeftSideLayout/LeftSideConstraint.ets rename entry/src/main/ets/pages/{ => LeftSideLayout}/LeftSideTab.ets (77%) diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 7c75061e..e9fe259f 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -1,7 +1,7 @@ import { hilog } from '@kit.PerformanceAnalysisKit'; import { edgeColors, display, AppStorageV2 } from '@kit.ArkUI'; import { TitleTab } from './TitleLayout/TitleTab' -import { LeftSideTab } from './LeftSideTab' +import { LeftSideTab } from './LeftSideLayout/LeftSideTab' import { ModelViewTab } from './modelViewTab' import { TitleColumnSub } from './TitleLayout/TitleColumnSub' import { MainWindowInfo } from './AppStorageV2Class' @@ -12,7 +12,9 @@ const DOMAIN = 0x0000; @ComponentV2 struct Index { @Local mwInfo: MainWindowInfo = AppStorageV2.connect(MainWindowInfo, () => new MainWindowInfo())!; - + @Local startX:number=0; + @Local isDragging:boolean=false; + @Provider('panelWidth') panelWidth:number=this.mwInfo.mainWindowWidth * 0.15; build() { //OpenCAX主界面整体布局,采用多行布局 Column({ space: 0 }) { @@ -34,11 +36,33 @@ struct Index { Row() { //左侧边导航区 - LeftSideTab().width("15%"); + LeftSideTab() + // 拖拽手柄 + Button() + //.width(1) // 手柄宽度 + .height('100%') + .type(ButtonType.Normal) + .backgroundColor(Color.Gray) + .onMouse((event) => { + if(event.button==MouseButton.Left&&event.action==MouseAction.Press){ + this.startX = event.screenX; // 记录起始坐标 + this.isDragging = true; + }else if(event.action==MouseAction.Move&&this.isDragging){ + // 计算新的宽度 + let newWidth = this.panelWidth + (event.screenX - this.startX); + // 添加最小宽度限制 + newWidth = Math.max(newWidth, 0); + this.panelWidth = newWidth; + // 更新起始坐标，实现连续拖动 + this.startX = event.screenX; + }else if(event.action==MouseAction.Release){ + this.isDragging = false; + } + }) //中间操作区域 Row() { ModelViewTab() - }.width('90%') + }.layoutWeight(1) .borderWidth(1) .align(Alignment.Center) }.width('100%') diff --git a/entry/src/main/ets/pages/LeftSideLayout/LeftSideLayout.ets b/entry/src/main/ets/pages/LeftSideLayout/LeftSideAssembly.ets similarity index 100% rename from entry/src/main/ets/pages/LeftSideLayout/LeftSideLayout.ets rename to entry/src/main/ets/pages/LeftSideLayout/LeftSideAssembly.ets diff --git a/entry/src/main/ets/pages/LeftSideLayout/LeftSideComponent.ets b/entry/src/main/ets/pages/LeftSideLayout/LeftSideComponent.ets new file mode 100644 index 00000000..5893ad73 --- /dev/null +++ b/entry/src/main/ets/pages/LeftSideLayout/LeftSideComponent.ets @@ -0,0 +1,76 @@ +import { TreeController, TreeListener, TreeListenerManager, TreeListenType, NodeParam, TreeView, CallbackParam, + SymbolGlyphModifier} from '@kit.ArkUI'; + +//@ComponentV2 + +@Entry +@ComponentV2 +export struct LeftSideComponent { + private treeController: TreeController = new TreeController(); + private treeListener: TreeListener = TreeListenerManager.getInstance().getTreeListener(); + @Local clickNodeId: number = 0; + + aboutToDisappear(): void { + this.treeListener.off(TreeListenType.NODE_CLICK, undefined); + this.treeListener.off(TreeListenType.NODE_ADD, undefined); + this.treeListener.off(TreeListenType.NODE_DELETE, undefined); + this.treeListener.off(TreeListenType.NODE_MOVE, undefined); + } + + @Builder menuBuilder1() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Text('新增').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) + .onClick((event: ClickEvent) => { + this.treeController.addNode(); + }) + Divider() + Text('删除').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) + .onClick((event: ClickEvent) => { + this.treeController.removeNode(); + }) + Divider() + Text('重命名').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) + .onClick((event: ClickEvent) => { + this.treeController.modifyNode(); + }) + }.width(100).border({width: 1, color: 0x80808a, radius: '16dp'}) + } + + aboutToAppear(): void { + this.treeListener.on(TreeListenType.NODE_CLICK, (callbackParam: CallbackParam) => { + this.clickNodeId = callbackParam.currentNodeId; + }) + this.treeListener.on(TreeListenType.NODE_ADD, (callbackParam: CallbackParam) => { + this.clickNodeId = callbackParam.currentNodeId; + }) + this.treeListener.on(TreeListenType.NODE_DELETE, (callbackParam: CallbackParam) => { + this.clickNodeId = callbackParam.currentNodeId; + }) + this.treeListener.once(TreeListenType.NODE_MOVE, (callbackParam: CallbackParam) => { + this.clickNodeId = callbackParam.currentNodeId; + }) + + let normalResource: Resource = $r('sys.symbol.house'); + let selectedResource: Resource = $r('sys.symbol.car'); + let editResource: Resource = $r('sys.symbol.calendar'); + let nodeParam: NodeParam = { parentNodeId:-1, currentNodeId: 1, isFolder: true, icon: normalResource, selectedIcon: selectedResource, + editIcon: editResource, primaryTitle: "部件历史记录", + secondaryTitle: "0" }; + this.treeController + .addNode(nodeParam) + .buildDone(); + this.treeController.refreshNode(-1, "父节点", "子节点"); + } + + build() { + Column(){ + SideBarContainer(SideBarContainerType.Embed) + { + TreeView({ treeController: this.treeController }) + .bindMenu(this.menuBuilder1) + } + .focusable(true) + .showControlButton(false) + .showSideBar(true) + } + }} \ No newline at end of file diff --git a/entry/src/main/ets/pages/LeftSideLayout/LeftSideConstraint.ets b/entry/src/main/ets/pages/LeftSideLayout/LeftSideConstraint.ets new file mode 100644 index 00000000..e69de29b diff --git a/entry/src/main/ets/pages/LeftSideTab.ets b/entry/src/main/ets/pages/LeftSideLayout/LeftSideTab.ets similarity index 77% rename from entry/src/main/ets/pages/LeftSideTab.ets rename to entry/src/main/ets/pages/LeftSideLayout/LeftSideTab.ets index e362b55e..bf2dc042 100644 --- a/entry/src/main/ets/pages/LeftSideTab.ets +++ b/entry/src/main/ets/pages/LeftSideLayout/LeftSideTab.ets @@ -1,12 +1,15 @@ -import { TitleButton } from './LayoutInterface/Interface/ButtonInterface'; -import {LeftSideBars} from './LayoutInterface/Layout/LeftSideBar' +import { TitleButton } from '../LayoutInterface/Interface/ButtonInterface'; +import {LeftSideBars} from '../LayoutInterface/Layout/LeftSideBar' +import { AppStorageV2 } from '@kit.ArkUI'; +import { MainWindowInfo } from '../AppStorageV2Class'; +import {LeftSideComponent} from './LeftSideComponent' @ComponentV2 export struct LeftSideTab { - + @Local mwInfo: MainWindowInfo = AppStorageV2.connect(MainWindowInfo, () => new MainWindowInfo())!; private leftSideBarTabs: TabsController = new TabsController(); @Local leftSideBarFocusIndex: number = 0; @Local isExpanded:boolean=true; - @Local leftWidth:number=0; + @Consumer('panelWidth') panelWidth:number=this.mwInfo.mainWindowWidth * 0.18; build() { Row() { @@ -27,6 +30,11 @@ export struct LeftSideTab { .height(50) .onClick(()=>{ this.isExpanded = !this.isExpanded; + if(this.isExpanded){ + this.panelWidth=this.mwInfo.mainWindowWidth * 0.15; + }else{ + this.panelWidth=0; + } }).margin({ top: 2,left:1,bottom:0,right:2}) Scroll() { Flex({ direction: FlexDirection.Column}) { @@ -61,21 +69,21 @@ export struct LeftSideTab { .scrollBar(BarState.Off) .width(50) .height('100%') - } + }.borderWidth(1) + .borderColor(Color.Grey) Column({space:1}){ if (this.isExpanded) { Column() { Tabs({ barPosition: BarPosition.Start, controller: this.leftSideBarTabs }) { ForEach(LeftSideBars, (item: TitleButton, index: number) => { TabContent() { - Text(item.eName) - .fontSize(30) + LeftSideComponent(); } }) }.barHeight(0) } } - } + }.width(this.panelWidth) }.width('auto') } -} \ No newline at end of file +} diff --git a/entry/src/main/ets/pages/TitleLayout/TitleTab.ets b/entry/src/main/ets/pages/TitleLayout/TitleTab.ets index 7911e532..6c00eb24 100644 --- a/entry/src/main/ets/pages/TitleLayout/TitleTab.ets +++ b/entry/src/main/ets/pages/TitleLayout/TitleTab.ets @@ -64,6 +64,12 @@ export struct TitleTab { this.titleBarFocusIndex = index; //this.currentModel=TitleData.mModels.get(index); }) + .onAxisEvent((event?: AxisEvent) => { + if (event?.hasAxis(AxisType.VERTICAL_AXIS)) { + this.titleBarTabs.changeIndex(index); + this.titleBarFocusIndex = index; + } + }) }) } } @@ -79,7 +85,7 @@ export struct TitleTab { }.align(Alignment.Start) .margin({ top: 0,left:0,bottom:0,right:0}) }) - }.scrollable(false) + }.scrollable(true) .barHeight(0) .margin({ top: 0,left:0,bottom:0,right:0}) .barMode(BarMode.Fixed) diff --git a/oh-package-lock.json5 b/oh-package-lock.json5 index c5a91ec3..aeb13c58 100644 --- a/oh-package-lock.json5 +++ b/oh-package-lock.json5 @@ -6,10 +6,18 @@ "lockfileVersion": 3, "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.", "specifiers": { + "@ibestservices/ibest-ui-v2@^1.1.2": "@ibestservices/ibest-ui-v2@1.1.2", "@ohos/hamock@1.0.0": "@ohos/hamock@1.0.0", "@ohos/hypium@1.0.25": "@ohos/hypium@1.0.25" }, "packages": { + "@ibestservices/ibest-ui-v2@1.1.2": { + "name": "@ibestservices/ibest-ui-v2", + "version": "1.1.2", + "integrity": "sha512-aERFyF/g3IrK6vgEAKV3TD3dWOAUUxovdOcFQ76JGOR+cDPyTUC4NtZEc2VxdtyKXMyU5MmMFs4y/LCd6z/zcQ==", + "resolved": "https://ohpm.openharmony.cn/ohpm/@ibestservices/ibest-ui-v2/-/ibest-ui-v2-1.1.2.har", + "registryType": "ohpm" + }, "@ohos/hamock@1.0.0": { "name": "@ohos/hamock", "version": "1.0.0", diff --git a/oh-package.json5 b/oh-package.json5 index c95806db..cec72696 100644 --- a/oh-package.json5 +++ b/oh-package.json5 @@ -2,9 +2,11 @@ "modelVersion": "6.0.2", "description": "Please describe the basic information.", "dependencies": { + "@ibestservices/ibest-ui-v2": "^1.1.2" }, "devDependencies": { "@ohos/hypium": "1.0.25", "@ohos/hamock": "1.0.0" - } -} + }, + "dynamicDependencies": {} +} \ No newline at end of file