修复自适应排版问题

This commit is contained in:
JackLee 2026-04-10 20:50:27 +08:00
parent a245b20fd2
commit 3f62c0885d
10 changed files with 94 additions and 98 deletions

View File

@ -64,7 +64,6 @@ export struct EventBtn {
.width('auto') .width('auto')
.textAlign(TextAlign.Center) .textAlign(TextAlign.Center)
.backgroundColor(Color.Transparent) .backgroundColor(Color.Transparent)
.fontColor($r('sys.color.font_emphasize'))
} }
}.padding(1) }.padding(1)
} }
@ -92,7 +91,6 @@ export struct MenuBtn {
} }
}) })
}.fontSize(20) }.fontSize(20)
.fontColor($r('sys.color.font_emphasize'))
} }
build() { build() {
@ -101,33 +99,32 @@ export struct MenuBtn {
Button() Button()
.width(ebWidth) .width(ebWidth)
.height(ebHeigth) .height(ebHeigth)
.backgroundColor(Color.Transparent)
.backgroundImage($r('app.media.' + this.menus[this.curtIndex].eIcon)) .backgroundImage($r('app.media.' + this.menus[this.curtIndex].eIcon))
.backgroundImagePosition({ x: '5%', y: '5%' }) .backgroundImagePosition({ x: '5%', y: '5%' })
.backgroundColor(Color.Transparent)
.backgroundImageSize({ .backgroundImageSize({
width: '90%', // 图片宽度占满按钮 width: '90%', // 图片宽度占满按钮
height: '90%' // 图片高度占满按钮 height: '90%' // 图片高度占满按钮
}).onClick(()=> { }).onClick(()=> {
ExecuteCommand((this.menus as Array<TitleButton>)[this.curtIndex] as TitleButton); ExecuteCommand((this.menus as Array<TitleButton>)[this.curtIndex] as TitleButton);
}) })
Button()
.bindMenu(this.BaseMenu) Button(){
.type(ButtonType.Normal) Column(){
.width(ebWidth) Image($r('app.media.base_chevron_down')).scale({ centerX: '50%', centerY: '50%' })
.height(edHeigth) .height(edHeigth)
.backgroundImage($r('app.media.base_chevron_down')) Text((this.menus[this.curtIndex].eName))
.backgroundImagePosition({ x: '35%', y: '0%' }) .fontSize(16)
.backgroundColor(Color.Transparent) .textAlign(TextAlign.Center)
Text((this.menus[this.curtIndex].eName)) }.height('100%')
.bindMenu(this.BaseMenu) .align(Alignment.Center)
.fontSize(16) }.constraintSize({ minWidth: ebWidth })
.width('auto') .height(mwInfo.width*0.01)
.textAlign(TextAlign.Center) .backgroundColor(Color.Transparent)
.backgroundColor(Color.Transparent) .bindMenu(this.BaseMenu)
.fontColor($r('sys.color.font_emphasize')) .type(ButtonType.Normal)
} }
} }.padding(1)
.padding(1)
} }
} }
@ -154,7 +151,6 @@ export struct SubColumnMenu {
.size({ height: ebWidth }) .size({ height: ebWidth })
}) })
}.fontSize(20) }.fontSize(20)
.fontColor($r('sys.color.font_emphasize'))
} }
@Builder @Builder
BaseMenu (){ BaseMenu (){
@ -177,7 +173,6 @@ export struct SubColumnMenu {
} }
}) })
}.fontSize(20) }.fontSize(20)
.fontColor($r('sys.color.font_emphasize'))
} }
build(){ build(){
@ -185,17 +180,17 @@ export struct SubColumnMenu {
Button(){ Button(){
Row(){ Row(){
Image($r('app.media.'+(this.icon!=undefined ? this.icon:(this.menus[this.curtIndex]as TitleButton).eIcon))) Image($r('app.media.'+(this.icon!=undefined ? this.icon:(this.menus[this.curtIndex]as TitleButton).eIcon)))
.height(mwInfo.width*0.01) .width(mwInfo.width*0.015)
.scale({ centerX: '50%', centerY: '50%' })
if(this.name!=undefined){ if(this.name!=undefined){
Text(this.name) Text(this.name)
.fontSize(16) .fontSize(16)
.fontColor($r('sys.color.font_emphasize'))
} }
} }.width('auto')
}.height(mwInfo.width*0.01) }.constraintSize({ minWidth: mwInfo.width*0.015 })
.backgroundColor(Color.Transparent) .backgroundColor(Color.Transparent)
.bindMenu(this.BaseMenu) .bindMenu(this.BaseMenu)
.type(ButtonType.Normal) .type(ButtonType.Normal)
}.width(this.name!=undefined ?mwInfo.width*0.02:mwInfo.width*0.01) }
} }
} }

View File

@ -30,12 +30,12 @@ export struct TextComboBox {
Text(this.name!=undefined?this.name:'') Text(this.name!=undefined?this.name:'')
.fontSize(16) .fontSize(16)
Text(this.menu[this.selectIndex].eName) Text(this.menu[this.selectIndex].eName)
.height('90%')
.bindMenu(this.EventMenu) .bindMenu(this.EventMenu)
.fontSize(16) .fontSize(16)
.backgroundColor('#ffe6e6e3') .backgroundColor($r('sys.color.search_container_focus_color'))
.height(mwInfo.height*0.02) .borderRadius(8)
}.height(mwInfo.width*0.01) }.justifyContent(FlexAlign.Start)
.justifyContent(FlexAlign.Start)
} }
} }
@ComponentV2 @ComponentV2
@ -59,6 +59,7 @@ export struct TextInputComboBox {
TextInput({placeholder:this.selectIndex.toString()}) TextInput({placeholder:this.selectIndex.toString()})
.bindMenu(this.EventMenu) .bindMenu(this.EventMenu)
.type(InputType.Number) .type(InputType.Number)
}.height(mwInfo.width*0.01) .height('90%')
}
} }
} }

View File

@ -63,12 +63,12 @@ export struct GroupTextEventMenu {
Blank().width('auto') Blank().width('auto')
Text(this.grpEvent.grpName) Text(this.grpEvent.grpName)
.fontSize(16) .fontSize(16)
.fontColor($r('sys.color.font_emphasize'))
Blank().width('auto') Blank().width('auto')
Button() Button()
.height(mwInfo.width*0.005) .height(mwInfo.width*0.005)
.width(mwInfo.width*0.005) .width(mwInfo.width*0.005)
.padding(1) .padding(1)
.backgroundColor(Color.Transparent)
.backgroundImage($r('app.media.base_seetings')) .backgroundImage($r('app.media.base_seetings'))
.backgroundImagePosition({ x: '5%', y: '5%' }) .backgroundImagePosition({ x: '5%', y: '5%' })
.backgroundImageSize({ .backgroundImageSize({
@ -76,7 +76,6 @@ export struct GroupTextEventMenu {
height: '90%' // 图片高度占满按钮 height: '90%' // 图片高度占满按钮
}) })
.bindMenu(BaseMenu(this.argsMenu)) .bindMenu(BaseMenu(this.argsMenu))
.backgroundColor(Color.Transparent)
} }
}.align(Alignment.BottomEnd) }.align(Alignment.BottomEnd)
} }

View File

@ -18,18 +18,16 @@ struct Index {
@Provider('RightSideWidth') rightSideWidth:number=mwInfo.width * 0.1; @Provider('RightSideWidth') rightSideWidth:number=mwInfo.width * 0.1;
build() { build() {
//OpenCAX主界面整体布局,采用多行布局 //OpenCAX主界面整体布局,采用多行布局
Column({ space: 0 }) { Column() {
//头部导航功能区 //头部导航功能区
TitleTab() TitleTab().height('15%')
//分割线 //分割线
Divider().vertical(false).strokeWidth(1).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Grey) Divider().vertical(false).strokeWidth(1).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Grey)
//工具栏 //工具栏
Row() { Row() {
TitleColumnSub(); TitleColumnSub()
Blank().layoutWeight(1) }.height('5%')
} .align(Alignment.Start)
.height(mwInfo.height * 0.02)
.align(Alignment.Start)
//分割线 //分割线
Divider().vertical(false).strokeWidth(1).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Grey) Divider().vertical(false).strokeWidth(1).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Grey)
@ -79,8 +77,7 @@ struct Index {
}) })
//右侧边导航区 //右侧边导航区
RightSideTab() RightSideTab()
}.width('100%') }.height('75%')
.height(mwInfo.height * 0.39)
//分割线 //分割线
Divider().vertical(false).strokeWidth(1).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Grey) Divider().vertical(false).strokeWidth(1).lineCap(LineCapStyle.Round).width('100%').backgroundColor(Color.Grey)
///状态栏 ///状态栏
@ -90,7 +87,8 @@ struct Index {
.align(Alignment.End) .align(Alignment.End)
.alignItems(HorizontalAlign.Start) .alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Center) .justifyContent(FlexAlign.Center)
.height(25) .height('5%')
}.margin({ top:0, left: 0, bottom: 0, right: 0 }) }.width('100%')
.height('100%')
} }
} }

View File

@ -13,9 +13,6 @@ export struct LeftSideTab {
Row() { Row() {
Column({space:1}){ Column({space:1}){
Button() Button()
.borderWidth(1)
.borderColor(Color.Grey)
.borderRadius(5)
.backgroundImagePosition({ x: '5%', y: '5%' }) .backgroundImagePosition({ x: '5%', y: '5%' })
.backgroundColor(Color.Transparent) .backgroundColor(Color.Transparent)
.backgroundImageSize({ .backgroundImageSize({
@ -35,9 +32,6 @@ export struct LeftSideTab {
Column({ space: 5 }) { Column({ space: 5 }) {
ForEach(LeftSideBars, (item: TitleButton, index: number) => { ForEach(LeftSideBars, (item: TitleButton, index: number) => {
Button() Button()
.borderWidth(1)
.borderColor(Color.Grey)
.borderRadius(5)
.backgroundImagePosition({ x: '5%', y: '5%' }) .backgroundImagePosition({ x: '5%', y: '5%' })
.backgroundColor(Color.Transparent) .backgroundColor(Color.Transparent)
.backgroundImageSize({ .backgroundImageSize({
@ -54,7 +48,7 @@ export struct LeftSideTab {
this.leftSideBarFocusIndex = index; this.leftSideBarFocusIndex = index;
}) })
})} })}
Blank().height('95%') Blank().layoutWeight(1)
} }
} }
.align(Alignment.Start) .align(Alignment.Start)

View File

@ -60,7 +60,6 @@ export struct ModelViewTab {
.barHeight(0) .barHeight(0)
.height('auto') .height('auto')
.barMode(BarMode.Fixed) .barMode(BarMode.Fixed)
.barPosition(BarPosition.Start) .barPosition(BarPosition.Start)
.backgroundBlurStyle(BlurStyle.COMPONENT_THIN) .backgroundBlurStyle(BlurStyle.COMPONENT_THIN)
.fadingEdge(true) .fadingEdge(true)
@ -69,15 +68,10 @@ export struct ModelViewTab {
.divider({ strokeWidth: '1px', color: $r('sys.color.comp_divider') }) .divider({ strokeWidth: '1px', color: $r('sys.color.comp_divider') })
}else{ }else{
Image($r('app.media.base_background')) Image($r('app.media.base_background'))
.width('100%')
.height('100%')
} }
}.width('100%')
}//.borderWidth('1') .height('100%')
//.borderColor(Color.Grey)
//.height('auto')
//.backgroundColor('#f3f3f0')
.padding($r('sys.float.padding_level1'))
.backgroundImageSize({ width: '100%', height: '100%' })
.borderRadius($r('sys.float.corner_radius_level8'))
} }
} }

View File

@ -20,9 +20,6 @@ export struct RightSideTab {
}.width(this.isExpanded?this.rightSideWidth:0) }.width(this.isExpanded?this.rightSideWidth:0)
Column({space:1}){ Column({space:1}){
Button() Button()
.borderWidth(1)
.borderColor(Color.Grey)
.borderRadius(5)
.backgroundImagePosition({ x: '5%', y: '5%' }) .backgroundImagePosition({ x: '5%', y: '5%' })
.backgroundColor(Color.Transparent) .backgroundColor(Color.Transparent)
.backgroundImageSize({ .backgroundImageSize({

View File

@ -52,8 +52,8 @@ export struct TitleColumnSub {
this.viewDialog=this.ViewDialog(); this.viewDialog=this.ViewDialog();
} }
this.viewDialog.open(); this.viewDialog.open();
}).width(mwInfo.width*0.01) }).width(mwInfo.width*0.015)
.height(mwInfo.width*0.01) .height(mwInfo.width*0.015)
.backgroundColor(Color.Transparent) .backgroundColor(Color.Transparent)
.backgroundImage($r('app.media.' + SwitchView[0].eIcon)) .backgroundImage($r('app.media.' + SwitchView[0].eIcon))
.backgroundImageSize({ .backgroundImageSize({
@ -61,6 +61,7 @@ export struct TitleColumnSub {
height: '100%' // 图片高度占满按钮 height: '100%' // 图片高度占满按钮
}) })
SubColumnMenu({menus:DisplayMode}) SubColumnMenu({menus:DisplayMode})
}.margin({ top: 1, left: 1, bottom: 1, right: 1 }) }.width('100%')
.height('100%')
} }
} }

View File

@ -23,31 +23,45 @@ export struct TitleTab {
Scroll() { Scroll() {
Row({space:0}) { Row({space:0}) {
Button((FileMenuData.aMenus[0] as TitleButton).eName) Button((FileMenuData.aMenus[0] as TitleButton).eName)
.fontSize(16) .width('7%')
.fontColor(Color.Black) .fontSize(18)
.height(mwInfo.height*0.025) .fontColor($r('sys.color.font'))
.bindMenu(BaseMenu(FileMenuData)) .bindMenu(BaseMenu(FileMenuData))
.type(ButtonType.Normal) .type(ButtonType.Normal)
.backgroundColor($r('sys.color.background_secondary')) .backgroundColor(Color.Transparent)
.fontColor($r('sys.color.font_emphasize'))
ForEach(this.curtModel, (item: TitleModel, index: number) => { ForEach(this.curtModel, (item: TitleModel, index: number) => {
Button(item.cmName) Button(){
.fontSize(16) Column(){
.fontColor(Color.Black) Text(item.cmName)
.fontWeight(index === this.titleBarFocusIndex ? FontWeight.Bold : FontWeight.Normal) .height('95%')
.height(mwInfo.height*0.025) .fontSize(18)
.type(ButtonType.Normal) .fontWeight(index === this.titleBarFocusIndex ? FontWeight.Bold : FontWeight.Normal)
.backgroundColor($r('sys.color.background_secondary')) .backgroundColor(Color.Transparent)
.fontColor($r('sys.color.font_emphasize'))
.onClick(() => { Divider()
this.titleBarTabs.changeIndex(index); .height('5%')
this.titleBarFocusIndex = index; .vertical(false)
}) .strokeWidth(2)
.lineCap(LineCapStyle.Round)
.color(Color.Grey)
.align(Alignment.Top)
.visibility(index === this.titleBarFocusIndex?Visibility.Visible:Visibility.Hidden)
}.width('100%')
.height('100%')
}
.width('7%')
.backgroundColor(index === this.titleBarFocusIndex ? $r('sys.color.container_modal_button_normal_baseboard') : Color.Transparent)
.type(ButtonType.Normal)
.onClick(() => {
this.titleBarTabs.changeIndex(index);
this.titleBarFocusIndex = index;
})
}) })
Blank().layoutWeight(1) Blank().layoutWeight(1)
} }
} }
.height('25%')
.align(Alignment.Start) .align(Alignment.Start)
.scrollable(ScrollDirection.Horizontal) .scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off) .scrollBar(BarState.Off)
@ -66,10 +80,11 @@ export struct TitleTab {
TitleTabContent({curtLayout:item}) TitleTabContent({curtLayout:item})
} }
}) })
}.scrollable(true) }
.height('75%')
.scrollable(true)
.barHeight(0) .barHeight(0)
.barMode(BarMode.Fixed) .barMode(BarMode.Fixed)
}.width('100%') }.margin({ top:0, left: 0, bottom: 0, right: 0 })
.height(mwInfo.height * 0.08)
} }
} }

View File

@ -24,7 +24,7 @@ export struct TitleTabContent {
}else if(row_item instanceof Array<TitleGroup>){ //Array<TitleGroup> }else if(row_item instanceof Array<TitleGroup>){ //Array<TitleGroup>
//功能组,迭代多个功能组 //功能组,迭代多个功能组
ForEach(row_item, (group_item: TitleGroup, index: number) =>{ ForEach(row_item, (group_item: TitleGroup, index: number) =>{
Column({ space:10 }){ Column({ space:5 }){
Row({ space: 1 }){ Row({ space: 1 }){
ForEach(group_item.grpBtn, (btn_item: TitleButton|Array<TitleButton>, index: number) =>{ ForEach(group_item.grpBtn, (btn_item: TitleButton|Array<TitleButton>, index: number) =>{
if(this.curtLayout?.cmName=='应用模块'){ if(this.curtLayout?.cmName=='应用模块'){
@ -41,13 +41,13 @@ export struct TitleTabContent {
} }
} }
}) })
}.margin({ top: 1,left:10,bottom:1,right:10}) }
//功能组名 //功能组名
Row(){ Row(){
GroupTextEventMenu({grpEvent:group_item}) GroupTextEventMenu({grpEvent:group_item})
}.margin({ top: 0,left:0,bottom:-5,right:0}) }
} }.height('100%')
Divider().vertical(true).strokeWidth(1).lineCap(LineCapStyle.Round).height('95%').backgroundColor(Color.Gray) Divider().vertical(true).strokeWidth(1).lineCap(LineCapStyle.Round).height('90%').backgroundColor(Color.Grey)
}) })
}else{ }else{
//菜单按钮 //菜单按钮
@ -61,9 +61,11 @@ export struct TitleTabContent {
} }
}) })
}.width('100%') }.width('100%')
.height('100%')
.align(Alignment.BottomEnd) .align(Alignment.BottomEnd)
.borderColor(Color.Gray) .borderColor(Color.Grey)
}) })
}.margin({ top: 5,left:1,bottom:1,right:1}) }.width('100%')
.height('100%')
} }
} }