调整部分组件布局
This commit is contained in:
parent
f18781fadd
commit
e0d893216f
@ -233,7 +233,7 @@ void NativeManager::OnMouseEvent(OH_NativeXComponent *component, void *window) {
|
||||
float deltaY = curtY - NativeManager::lastMouseY_;
|
||||
// 将像素移动量映射到旋转角度
|
||||
// 这里的系数可以根据需要调整灵敏度
|
||||
float rotationSpeed = 0.003f;
|
||||
float rotationSpeed = 0.001f;
|
||||
float angleX = deltaX * rotationSpeed;
|
||||
float angleY = deltaY * rotationSpeed;
|
||||
// 通知渲染线程执行旋转
|
||||
|
||||
@ -2,6 +2,7 @@ import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.Ab
|
||||
import { hilog } from '@kit.PerformanceAnalysisKit';
|
||||
import { window,display,AppStorageV2} from '@kit.ArkUI';
|
||||
import {MainScreenDisplayInfo,MainWindowInfo,MainWindowStageInfo} from '../pages/AppStorageV2Class'
|
||||
import { IBestInit } from "@ibestservices/ibest-ui-v2"
|
||||
const DOMAIN = 0x0000;
|
||||
|
||||
export default class EntryAbility extends UIAbility {
|
||||
@ -74,6 +75,7 @@ export default class EntryAbility extends UIAbility {
|
||||
hilog.error(DOMAIN, 'Tag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
|
||||
return;
|
||||
}
|
||||
IBestInit(windowStage, this.context);
|
||||
hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
|
||||
});
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ export struct EventBtn {
|
||||
.height(this.mwInfo.mainWindowWidth*0.02)
|
||||
.backgroundImage($r('app.media.' + this.eventBtn.eIcon))
|
||||
.backgroundImagePosition({ x: '5%', y: '5%' })
|
||||
.backgroundColor(Color.Transparent)
|
||||
.backgroundColor('#F8F9FA')
|
||||
.backgroundImageSize({
|
||||
width: '90%', // 图片宽度占满按钮
|
||||
height: '90%' // 图片高度占满按钮
|
||||
|
||||
@ -48,7 +48,7 @@ export struct GroupTextEventMenu {
|
||||
height: '90%' // 图片高度占满按钮
|
||||
})
|
||||
.bindMenu(this.GroupMenu(this.grpEvent.grpMenu))
|
||||
.backgroundColor(Color.Transparent)
|
||||
.backgroundColor('#F8F9FA')
|
||||
}
|
||||
}.align(Alignment.BottomEnd)
|
||||
}
|
||||
@ -90,7 +90,7 @@ export struct MenuBtn {
|
||||
.height(this.mwInfo.mainWindowWidth*0.02)
|
||||
.backgroundImage($r('app.media.' + this.menuBtn[this.curtIndex].eIcon))
|
||||
.backgroundImagePosition({ x: '5%', y: '5%' })
|
||||
.backgroundColor(Color.Transparent)
|
||||
.backgroundColor('#F8F9FA')
|
||||
.backgroundImageSize({
|
||||
width: '90%', // 图片宽度占满按钮
|
||||
height: '90%' // 图片高度占满按钮
|
||||
@ -102,14 +102,13 @@ export struct MenuBtn {
|
||||
.height(this.mwInfo.mainWindowWidth*0.005)
|
||||
.backgroundImage($r('app.media.base_chevron_down'))
|
||||
.backgroundImagePosition({ x: '35%', y: '0%' })
|
||||
.backgroundColor(Color.Transparent)
|
||||
.backgroundColor('#F8F9FA')
|
||||
|
||||
Text(this.menuBtn[this.curtIndex].eName)
|
||||
.fontSize(16)
|
||||
.width('auto')
|
||||
.height(this.mwInfo.mainWindowWidth*0.005)
|
||||
.textAlign(TextAlign.Center)
|
||||
|
||||
}
|
||||
}.padding(1)
|
||||
}
|
||||
|
||||
@ -21,28 +21,23 @@ struct Index {
|
||||
//头部导航功能区
|
||||
TitleTab()
|
||||
.height(this.mwInfo.mainWindowHeight * 0.1)
|
||||
.borderWidth(2)
|
||||
.borderRadius(5)
|
||||
|
||||
//分割线
|
||||
Divider().vertical(false).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Gray)
|
||||
//工具栏
|
||||
Row() {
|
||||
TitleColumnSub();
|
||||
}
|
||||
.width('100%')
|
||||
.height(this.mwInfo.mainWindowHeight * 0.03)
|
||||
.borderWidth(2)
|
||||
.borderRadius(5)
|
||||
.align(Alignment.Start)
|
||||
|
||||
//分割线
|
||||
Divider().vertical(false).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Gray)
|
||||
Row() {
|
||||
//左侧边导航区
|
||||
LeftSideTab()
|
||||
// 拖拽手柄
|
||||
Button()
|
||||
//.width(1) // 手柄宽度
|
||||
.height('100%')
|
||||
.type(ButtonType.Normal)
|
||||
.backgroundColor(Color.Gray)
|
||||
Divider().vertical(true).strokeWidth(3).color(0x000000).lineCap(LineCapStyle.Round).height('100%').backgroundColor(Color.Gray)
|
||||
.onMouse((event) => {
|
||||
if(event.button==MouseButton.Left&&event.action==MouseAction.Press){
|
||||
this.startX = event.screenX; // 记录起始坐标
|
||||
@ -63,24 +58,16 @@ struct Index {
|
||||
Row() {
|
||||
ModelViewTab()
|
||||
}.layoutWeight(1)
|
||||
.borderWidth(1)
|
||||
.align(Alignment.Center)
|
||||
}.width('100%')
|
||||
.height(this.mwInfo.mainWindowHeight * 0.36)
|
||||
.borderWidth(2)
|
||||
.borderRadius(5)
|
||||
.margin({
|
||||
top: -2,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0
|
||||
})
|
||||
|
||||
//分割线
|
||||
Divider().vertical(false).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Gray)
|
||||
///状态栏
|
||||
Column() {
|
||||
Text('状态栏')
|
||||
}.width('100%')
|
||||
.height(this.mwInfo.mainWindowHeight * 0.05)
|
||||
.borderWidth(1)
|
||||
}.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
@ -1,76 +1,193 @@
|
||||
import { TreeController, TreeListener, TreeListenerManager, TreeListenType, NodeParam, TreeView, CallbackParam,
|
||||
SymbolGlyphModifier} from '@kit.ArkUI';
|
||||
|
||||
import { IBestTree, IBestTreeController, IBestTreeData, IBestTreeNodeData } from "@ibestservices/ibest-ui-v2";
|
||||
//@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, "父节点", "子节点");
|
||||
}
|
||||
|
||||
@Local data: IBestTreeData[] = [
|
||||
{
|
||||
label: '模型视图',
|
||||
children: [
|
||||
{
|
||||
label: 'Level two 1-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 1-1-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level four 1-1-1-1',
|
||||
},
|
||||
{
|
||||
label: 'Level four 1-1-1-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Level three 1-1-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level four 1-1-2-1',
|
||||
},
|
||||
{
|
||||
label: 'Level four 1-1-2-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Level two 1-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 1-2-1',
|
||||
},
|
||||
{
|
||||
label: 'Level three 1-2-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '摄像机',
|
||||
children: [
|
||||
{
|
||||
label: 'Level two 1-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 1-1-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level four 1-1-1-1',
|
||||
},
|
||||
{
|
||||
label: 'Level four 1-1-1-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Level three 1-1-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level four 1-1-2-1',
|
||||
},
|
||||
{
|
||||
label: 'Level four 1-1-2-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Level two 1-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 1-2-1',
|
||||
},
|
||||
{
|
||||
label: 'Level three 1-2-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '图像',
|
||||
children: [
|
||||
{
|
||||
label: 'Level two 1-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 1-1-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level four 1-1-1-1',
|
||||
},
|
||||
{
|
||||
label: 'Level four 1-1-1-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Level three 1-1-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level four 1-1-2-1',
|
||||
},
|
||||
{
|
||||
label: 'Level four 1-1-2-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Level two 1-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 1-2-1',
|
||||
},
|
||||
{
|
||||
label: 'Level three 1-2-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '模型历史记录',
|
||||
children: [
|
||||
{
|
||||
label: 'Level two 1-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 1-1-1',
|
||||
children: [
|
||||
{
|
||||
label: 'Level four 1-1-1-1',
|
||||
},
|
||||
{
|
||||
label: 'Level four 1-1-1-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Level three 1-1-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level four 1-1-2-1',
|
||||
},
|
||||
{
|
||||
label: 'Level four 1-1-2-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Level two 1-2',
|
||||
children: [
|
||||
{
|
||||
label: 'Level three 1-2-1',
|
||||
},
|
||||
{
|
||||
label: 'Level three 1-2-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
build() {
|
||||
Column(){
|
||||
SideBarContainer(SideBarContainerType.Embed)
|
||||
{
|
||||
TreeView({ treeController: this.treeController })
|
||||
.bindMenu(this.menuBuilder1)
|
||||
}
|
||||
.focusable(true)
|
||||
.showControlButton(false)
|
||||
.showSideBar(true)
|
||||
}
|
||||
}}
|
||||
Text('历史记录建模模式')
|
||||
IBestTree({
|
||||
data: this.data,
|
||||
onNodeClick: (data: IBestTreeData, level: number) => {
|
||||
console.log('onNodeClick', JSON.stringify(data), level)
|
||||
}
|
||||
})
|
||||
}.height("100%")
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
}
|
||||
}
|
||||
@ -9,7 +9,7 @@ export struct LeftSideTab {
|
||||
private leftSideBarTabs: TabsController = new TabsController();
|
||||
@Local leftSideBarFocusIndex: number = 0;
|
||||
@Local isExpanded:boolean=true;
|
||||
@Consumer('panelWidth') panelWidth:number=this.mwInfo.mainWindowWidth * 0.18;
|
||||
@Consumer('panelWidth') panelWidth:number=this.mwInfo.mainWindowWidth * 0.1;
|
||||
|
||||
build() {
|
||||
Row() {
|
||||
@ -31,7 +31,7 @@ export struct LeftSideTab {
|
||||
.onClick(()=>{
|
||||
this.isExpanded = !this.isExpanded;
|
||||
if(this.isExpanded){
|
||||
this.panelWidth=this.mwInfo.mainWindowWidth * 0.15;
|
||||
this.panelWidth=this.mwInfo.mainWindowWidth * 0.1;
|
||||
}else{
|
||||
this.panelWidth=0;
|
||||
}
|
||||
|
||||
@ -31,12 +31,6 @@ export struct TitleTab {
|
||||
MenuItem({ startIcon: $r('app.media.'+item.eIcon), content: item.eName })
|
||||
.width('auto')
|
||||
.height('auto')
|
||||
.margin({
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -76,20 +70,20 @@ export struct TitleTab {
|
||||
.align(Alignment.Start)
|
||||
.scrollable(ScrollDirection.Horizontal)
|
||||
.scrollBar(BarState.Off)
|
||||
.margin({ top: 2,left:2,bottom:2,right:2})
|
||||
.margin({ top: 2,left:2,bottom:0,right:2})
|
||||
.width('100%')
|
||||
//分割线
|
||||
Divider().vertical(false).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Gray)
|
||||
Tabs({barPosition: BarPosition.Start, index: this.titleBarDefaultFocusIndex,controller: this.titleBarTabs}){
|
||||
ForEach(this.curtModel,(item:TitleModel, index: number)=>{
|
||||
TabContent() {
|
||||
TitleTabContent({curtLayout:item})
|
||||
}.align(Alignment.Start)
|
||||
.margin({ top: 0,left:0,bottom:0,right:0})
|
||||
})
|
||||
}.scrollable(true)
|
||||
.barHeight(0)
|
||||
.margin({ top: 0,left:0,bottom:0,right:0})
|
||||
.barMode(BarMode.Fixed)
|
||||
}.width(this.mwInfo.mainWindowWidth)
|
||||
.borderWidth('1')
|
||||
.backgroundColor('#F8F9FA')
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,11 +47,8 @@ export struct TitleTabContent {
|
||||
}.margin({ top: 1,left:1,bottom:1,right:1})
|
||||
//功能组名
|
||||
GroupTextEventMenu({grpEvent:group_item})
|
||||
}.borderWidth(2)
|
||||
.borderRadius(5)
|
||||
.borderColor(Color.Grey)
|
||||
.margin({ top: 0,left:5,bottom:0,right:0})
|
||||
.height(this.mwInfo.mainWindowHeight*0.073)
|
||||
}.height(this.mwInfo.mainWindowHeight*0.073)
|
||||
Divider().vertical(true).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round).height('100%').backgroundColor(Color.Gray)
|
||||
})
|
||||
}else{
|
||||
//菜单按钮
|
||||
@ -67,9 +64,7 @@ export struct TitleTabContent {
|
||||
}.width('100%')
|
||||
.align(Alignment.BottomEnd)
|
||||
.borderColor(Color.Gray)
|
||||
|
||||
})
|
||||
}.margin({ top: 1,left:1,bottom:1,right:1})
|
||||
//.borderWidth(1)
|
||||
}
|
||||
}
|
||||
@ -59,9 +59,7 @@ export struct ModelView {
|
||||
Row(){
|
||||
ContentSlot(this.nodeContent);
|
||||
}.layoutWeight(1)
|
||||
.borderWidth(1)
|
||||
}
|
||||
.borderWidth(1)
|
||||
.width('100%')
|
||||
.height('100%');
|
||||
}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { hilog } from '@kit.PerformanceAnalysisKit';
|
||||
import { MainWindowInfo } from './AppStorageV2Class';
|
||||
import {ModelView} from './modelView'
|
||||
import { AppStorageV2 } from '@kit.ArkUI';
|
||||
|
||||
class TaskTab{
|
||||
icon:string=''
|
||||
@ -10,13 +12,15 @@ let dTab:Array<TaskTab>=[
|
||||
{icon:'',str:'默认任务',event:''}
|
||||
]
|
||||
|
||||
@Component
|
||||
@ComponentV2
|
||||
export struct ModelViewTab {
|
||||
@Local mwInfo: MainWindowInfo = AppStorageV2.connect<MainWindowInfo>(MainWindowInfo, () => new MainWindowInfo())!;
|
||||
|
||||
//顶部导航组件
|
||||
private modelViewBarTabs: TabsController = new TabsController();
|
||||
//当前的顶部导航选择页
|
||||
@State modelViewBarFocusIndex: number = 0;
|
||||
@State modelFilePath:string='';
|
||||
@Local modelViewBarFocusIndex: number = 0;
|
||||
@Local modelFilePath:string='';
|
||||
build() {
|
||||
Flex({ direction: FlexDirection.Column }) {
|
||||
Scroll() {
|
||||
@ -24,20 +28,19 @@ export struct ModelViewTab {
|
||||
ForEach(dTab, (item: TaskTab, index: number) => {
|
||||
Row({ space: 0 }) {
|
||||
Image($r('app.media.startIcon'))
|
||||
.width(25)
|
||||
.height(25)
|
||||
.width(this.mwInfo.mainWindowWidth*0.012)
|
||||
.height(this.mwInfo.mainWindowWidth*0.012)
|
||||
.objectFit(ImageFit.Contain)
|
||||
Button(item.str)
|
||||
.fontWeight(index === this.modelViewBarFocusIndex ? FontWeight.Bold : FontWeight.Normal)
|
||||
.height(25)
|
||||
.width(60)
|
||||
.padding(5)
|
||||
.width('auto')
|
||||
.height(this.mwInfo.mainWindowWidth*0.012)
|
||||
.type(ButtonType.Normal)
|
||||
Button('X')
|
||||
.height(25)
|
||||
.width(25)
|
||||
.fontSize(12)
|
||||
.width(this.mwInfo.mainWindowWidth*0.012)
|
||||
.height(this.mwInfo.mainWindowWidth*0.012)
|
||||
.type(ButtonType.Normal)
|
||||
.padding(1)
|
||||
.align(Alignment.Center)
|
||||
}.onClick(() => {
|
||||
this.modelViewBarTabs.changeIndex(index);
|
||||
@ -45,38 +48,19 @@ export struct ModelViewTab {
|
||||
})
|
||||
})
|
||||
}
|
||||
}.borderWidth('1')
|
||||
.borderColor(Color.Gray)
|
||||
.align(Alignment.Start)
|
||||
}.align(Alignment.Start)
|
||||
.scrollable(ScrollDirection.Horizontal)
|
||||
.scrollBar(BarState.Off)
|
||||
.margin({
|
||||
top: 2,
|
||||
left: 2,
|
||||
bottom: 2,
|
||||
right: 2
|
||||
})
|
||||
.width('100%')
|
||||
|
||||
//分割线
|
||||
Divider().vertical(false).strokeWidth(1).color(0x000000).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Gray)
|
||||
Tabs({ barPosition: BarPosition.Start, index: 0, controller: this.modelViewBarTabs }) {
|
||||
TabContent() {
|
||||
ModelView()
|
||||
}.align(Alignment.Start)
|
||||
.padding(1)
|
||||
.margin({
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 2,
|
||||
right: 0
|
||||
})
|
||||
}.scrollable(false)
|
||||
.barHeight(0)
|
||||
.margin({
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0
|
||||
})
|
||||
.height('auto')
|
||||
.barMode(BarMode.Fixed)
|
||||
}.borderWidth('1')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user