增加左边栏布局
This commit is contained in:
parent
f7456ffb37
commit
f18781fadd
@ -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>(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%')
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}}
|
||||
@ -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>(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')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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)
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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": {}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user