鸿蒙-PC三栏布局

2024-09-05 14:12

文章标签 布局三栏 pc 鸿蒙

本文主要是介绍鸿蒙-PC三栏布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考链接：

文档中心

// MainAbility.ts
import { window, display } from '@kit.ArkUI'
import { Ability } from '@kit.AbilityKit'

export default class MainAbility extends Ability {
private windowObj?: window.Window
private curBp?: string
private myWidth?: number
// ...
// 根据当前窗口尺寸更新断点
private updateBreakpoint(windowWidth:number) :void{
// 将长度的单位由px换算为vp
let windowWidthVp = windowWidth / (display.getDefaultDisplaySync().densityDPI / 160)
let newBp: string = ''
let newWd: number
if (windowWidthVp < 320) {
newBp = 'xs'
newWd = 360
} else if (windowWidthVp < 600) {
newBp = 'sm'
newWd = 360
} else if (windowWidthVp < 840) {
newBp = 'md'
newWd = 600
} else {
newBp = 'lg'
newWd = 600
}
if (this.curBp !== newBp) {
this.curBp = newBp
this.myWidth = newWd
// 使用状态变量记录当前断点值
AppStorage.setOrCreate('currentBreakpoint', this.curBp)
// 使用状态变量记录当前minContentWidth值
AppStorage.setOrCreate('myWidth', this.myWidth)
}
}

onWindowStageCreate(windowStage: window.WindowStage) :void{
windowStage.getMainWindow().then((windowObj) => {
this.windowObj = windowObj
// 获取应用启动时的窗口尺寸
this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width)
// 注册回调函数，监听窗口尺寸变化
windowObj.on('windowSizeChange', (windowSize)=>{
this.updateBreakpoint(windowSize.width)
})
});
// ...
}

// 窗口销毁时，取消窗口尺寸变化监听
onWindowStageDestroy() :void {
if (this.windowObj) {
this.windowObj.off('windowSizeChange')
}
}
//...
}

// tripleColumn.ets
@Component
struct Details {
private imageSrc: Resource=$r('app.media.startIcon')
build() {
Column() {
Image(this.imageSrc)
.objectFit(ImageFit.Contain)
.height(300)
.width(300)
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}

@Component
struct Item {
private imageSrc?: Resource
private label?: string

build() {
NavRouter() {
Text(this.label)
.fontSize(24)
.fontWeight(FontWeight.Bold)
.backgroundColor('#66000000')
.textAlign(TextAlign.Center)
.width('100%')
.height('30%')
NavDestination() {
Details({imageSrc: this.imageSrc})
}.title(this.label)
.hideTitleBar(false)
.backgroundColor('#FFFFFF')
}
.margin(10)
}
}

@Entry
@Component
struct TripleColumnSample {
@State arr: number[] = [1, 2, 3]
@StorageProp('myWidth') myWidth: number = 360

@Builder NavigationTitle() {
Column() {
Text('Sample')
.fontColor('#000000')
.fontSize(24)
.width('100%')
.height('100%')
.align(Alignment.BottomStart)
.margin({left:'5%'})
}.alignItems(HorizontalAlign.Start)
}

build() {
SideBarContainer() {
Column() {
List() {
ForEach(this.arr, (item:number, index) => {
ListItem() {
Text('A'+item)
.width('100%').height("20%").fontSize(24)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center).backgroundColor('#66000000')
}
})
}.divider({ strokeWidth: 5, color: '#F1F3F5' })
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.backgroundColor('#F1F3F5')

Column() {
Navigation() {
List(){
ListItem() {
Column() {
Item({ label: 'B1', imageSrc: $r('app.media.startIcon') })
Item({ label: 'B2', imageSrc: $r('app.media.startIcon') })
}
}.width('100%')
}
}
.mode(NavigationMode.Auto)
.minContentWidth(360)
.navBarWidth(240)
.backgroundColor('#FFFFFF')
.height('100%')
.width('100%')
.hideToolBar(true)
.title(this.NavigationTitle)
}.width('100%').height('100%')
}.sideBarWidth(240)
.minContentWidth(this.myWidth)
}
}