鸿蒙 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.知识点列表的重复布局,手机端为每行一列,平板端为每行3列。
GridRow({
gutter: Utils.getVp(23)
}) {
ForEach(this.knowledgeDataList, (item: KnowledgeItem, tempIndex) => {
GridCol({ span: { sm: 12, md: 6, lg: 4 } }) {
KnowledgeListItemLayout({ knowledgeInfo: item, level: 0 });
}
})
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!