鸿蒙 next实现页签栏平板端适配
1.在应用启动时通过 updateBreakpoint
获取当前窗口尺寸断点
private updateBreakpoint(windowWidth: number): void {
try {
let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels
console.log('run get windowWidthVp', windowWidthVp)
let newBp: string = ''
if (windowWidthVp < 600) {
newBp = 'sm'
} else if (windowWidthVp < 840) {
newBp = 'md'
} else {
newBp = 'lg'
}
if (this.curBp !== newBp) {
this.curBp = newBp
AppStorage.setOrCreate('currentBreakpoint', this.curBp)
}
} catch (err) {
console.log("getDisplayByIdSync failed err" + err.code)
}
}
2.实现通用的断点工具类
declare interface BreakPointTypeOption<T> {
sm?: T
md?: T
lg?: T
}
export class BreakPointType<T> {
options: ESObject
constructor(option: BreakPointTypeOption<T>) {
this.options = option
}
getValue(currentBreakPoint: string): T {
return this.options[currentBreakPoint] as T
}
}
3.实现手机端页签栏在底部,平板端页签栏在左边:
Tabs({
barPosition: new BreakPointType({
sm: BarPosition.End,
md: BarPosition.End,
lg: BarPosition.Start
}).getValue(this.currentBreakpoint),
index: 0,
controller: this.controller
}) {
ForEach(tabbarList, (item: TabbarItem, index) => {
TabContent() {
if (Utils.isSoutiXiaApp()) {
this.questionsTabContent(index)
} else {
this.defaultTabContent(index)
}
}.tabBar(this.TabBuilder(index))
})
}
.scrollable(false)
.backgroundColor($r('app.color.mainBgColor'))
.vertical(new BreakPointType({ sm: false, md: false, lg: true }).getValue(this.currentBreakpoint))
.barWidth(new BreakPointType({ sm: '100%', md: '100%', lg: Utils.getVp(94) }).getValue(this.currentBreakpoint))
.barHeight(new BreakPointType({
sm: Utils.getVp(94),
md: Utils.getVp(94),
lg: '100%'
}).getValue(this.currentBreakpoint))
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!