鸿蒙适配一多搭建首页框架
认识一多
随着终端设备形态日益多样化,分布式技术逐渐打破单一硬件边界,一个应用或服务,可以在不同的硬件设备之间随意调用、互助共享,让用户享受无缝的全场景体验。而作为应用开发者,广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容,则需要适配不同的屏幕尺寸和硬件,开发成本较高。HarmonyOS系统面向多终端提供了“一次开发,多端部署”(后文中简称为“一多”)的能力,让开发者可以基于一种设计,高效构建多端可运行的应用。
“一多”建议从最初的设计阶段开始就拉通多设备综合考虑。考虑实际智能终端设备种类繁多,设计师无法针对每种具体设备各自出一份UX设计图。“一多”建议从设备屏幕宽度的维度,将设备划分为六大类。设计师只需要针对这六大类设备做设计,而无需关心具体的设备形态。
超小设备 | xs |
小设备 | sm |
中设备 | md |
大设备 | lg |
特大设备 | xl |
超大设备 | xxl |
GridRow和Tab实现首页适配一多
首页我们一般使用Tab来布局,包含4到6个子页面,在中小屏手机上选项卡在底部,Tab使用上下排版,例如手机,折叠屏和竖向平板等等,但像横向平板和2in1设备采用上下排版就不合适了,推荐采用左右排版。Tab的vertical属性可以设置Tab是上下排版还是左右排版。
现在我们只需要判断出设备是中小屏还是大屏设备,系统给我们提供了GridRow栅格组件,我们在栅格组件的onBreakpointChange中可以获取到当前设备属于哪一种。具体实现如下
@ComponentV2
export struct HomePage {
@Local breakPoint: string = 'unknown'
@Local selectIndex: number = 0
readonly items: TabItemBean[] = [
{ name: '推荐', icon: $r('sys.symbol.house') },
{ name: '体系', icon: $r('sys.symbol.puzzle') },
{ name: '导航', icon: $r('sys.symbol.paperplane') },
{ name: '项目', icon: $r('sys.symbol.square_grid_2x2') },
{ name: '我的', icon: $r('sys.symbol.person') }
]
@Computed
get isLg(): boolean {
return this.breakPoint === 'lg'
}
@Builder
tabItemBuilder(item: TabItemBean, index: number) {
Column() {
SymbolGlyph(item.icon)
.fontSize(24)
.fontColor([this.selectIndex === index ? $r('app.color.brand_color') : $r('app.color.dialog_content')])
Text(item.name)
.fontSize(14)
.fontColor(this.selectIndex === index ? $r('app.color.brand_color') : $r('app.color.dialog_content'))
}.onClick(() => {
this.selectIndex = index
})
}
build() {
GridRow({
columns: 1,
breakpoints: { reference: BreakpointsReference.WindowSize }
}) {
GridCol() {
Tabs({ index: $$this.selectIndex }) {
Repeat<TabItemBean>(this.items).each((data: Readonly<RepeatItem<TabItemBean>>) => {
TabContent() {
Text(data.item.name)
}.tabBar(this.tabItemBuilder(data.item, data.index))
}).key((data: Readonly<TabItemBean>) => data.name)
}
.vertical(this.isLg)
.barPosition(this.isLg ? BarPosition.Start : BarPosition.End)
}
}.width('100%')
.height('100%')
.onBreakpointChange((point) => {
this.breakPoint = point
})
}
}
在中小屏设备上,Tab选项卡在底部,选项卡采用横向排版;在大屏设备上,Tab选项卡在左边,选项卡采用竖向排版,效果如图。
#鸿蒙#