调整部分组件布局

This commit is contained in:
JackLee 2026-03-19 17:54:46 +08:00
parent f18781fadd
commit e0d893216f
11 changed files with 226 additions and 150 deletions

View File

@ -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;
// 通知渲染线程执行旋转

View File

@ -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.');
});
}

View File

@ -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%' // 图片高度占满按钮

View File

@ -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)
}

View File

@ -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%')
}

View File

@ -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)
}
}

View File

@ -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;
}

View File

@ -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')
}
}

View File

@ -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)
}
}

View File

@ -59,9 +59,7 @@ export struct ModelView {
Row(){
ContentSlot(this.nodeContent);
}.layoutWeight(1)
.borderWidth(1)
}
.borderWidth(1)
.width('100%')
.height('100%');
}

View File

@ -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')