【HarmonyOS NEXT】一次开辟多端摆设（以轮播图、Tab栏、列表为例，配合栅
关键词：一多、响应式、媒体查询、栅格结构、断点、UI随着设备形态的逐渐增多，应用界面适配也面临着很大题目，在以往的安卓应用开辟过程中，往往需要重新开辟一套适用于大屏展示的应用，耗时又耗力，而鸿蒙提供响应式开辟的解决方案，提供系统级的接口供开辟者调用，从而使得一款应用一套代码能同时运行在不同形态的设备上，也能给用户带来很好的交互体验。
https://i-blog.csdnimg.cn/direct/5c9307de6c93477ab671451b68a5329b.png
本期文章以轮播图、Tab栏、列表为例，配合栅格结构与媒体查询，举行 UI 的一多开辟。
本期完整代码已提交至gitee：one2More: 【HarmonyOS NEXT】一次开辟多端摆设（以轮播图、Tab栏、列表为例，配合栅格结构与媒体查询，举行 UI 的一多开辟）
目次
效果预览
1. 了解断点、媒体查询、栅格结构
断点
媒体查询
栅格结构
2. 封装媒体查询监听断点工具类
3. 配合媒体查询做 Swiper() 轮播图分割效果
4. 配合媒体查询做 Tab 栏 UI 展示位置变更
5. 配合栅格结构做列表展示数量控制
总结
效果预览
https://i-blog.csdnimg.cn/direct/ca47016df22b4d7aaed0e88b7f2ad85e.gif
https://i-blog.csdnimg.cn/direct/31ad2691ec364c3c83a0cf103b1eae46.png 普通屏
https://i-blog.csdnimg.cn/direct/69670db92aed4eeeb7d71a666e4fbf82.png 折叠屏
https://i-blog.csdnimg.cn/direct/b76328f9a25c4c0f9e63f2e9c7ff3287.png 大屏
1. 了解断点、媒体查询、栅格结构
断点
鸿蒙提供断点以应用窗口宽度为切入点，将应用窗口在宽度维度上分成了几个不同的区间即不同的断点，不同设备会进入到不同的断点区间，在不同的区间下，我们可以可根据需要实现不同的页面结构效果。具体的断点对应的设备尺寸如下所示。
断点名称取值范围（vp）xssmmdlg 媒体查询
媒体查询支持监听窗口宽度、横竖屏、深浅色、设备范例等多种媒体特征，当媒体特征发生改变时同步调解页面结构。我们可以借助媒体查询本领，监听断点的变革。
栅格结构
栅格组件默认提供xs、sm、md、lg四个断点，除了默认的四个断点，还支持启用 xl 和 xxl 两个额外的断点，我们只需要在 GridRow() 组件的 breakpoints 属性中依次设置对应断点的尺寸，可自行对断点设备的尺寸举行设置从而满足本身尺寸的业务需求，固然还是更推荐使用默认的断点尺，如果使用到媒体查询，和自界说尺寸保持一致即可。
breakpoints 数组中最大可写 5 个尺寸，对应 6 个断点范围，且断点值后面必须加上vp单位。
reference 属性代表 GridRow 宽度变革随屏幕变革，还是随当前局部地区尺寸变革（因为在实际场景中，存在应用窗口尺寸不变但是局部地区尺寸发生了变革的情况，栅格组件支持以自身宽度为参照物响应断点变革具有更大的机动性。）
栅格结构详细介绍请参考：文档中心
示例代码：
@Entry
@Component
struct GridRowSample1 {
@State private currentBreakpoint: string = 'unknown'
build() {
// 修改断点的取值范围同时启用更多断点，注意，修改的断点值后面必须加上vp单位。
GridRow({breakpoints: {value: ['600vp', '700vp', '800vp', '900vp', '1000vp'],
reference: BreakpointsReference.WindowSize}}) {
GridCol({span:{xs: 12, sm: 12, md: 12, lg:12, xl: 12, xxl:12}}) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(this.currentBreakpoint).fontSize(50).fontWeight(FontWeight.Medium)
}
}
}.onBreakpointChange((currentBreakpoint: string) => {
this.currentBreakpoint = currentBreakpoint
})
}
}
2. 封装媒体查询监听断点工具类
给我们的业务封装媒体查询监听断点工具类，以便后续使用，在首页生命周期过程中举行调用初始化，使用 LocalStorage 或 AppStorage 保存当前屏幕断点的名称，在应用的恣意页面内通过 StorageProp 获取并动态观察屏幕设备形态状态的变革从而更新页面 UI 的展示效果，如折叠屏形态下窄屏变宽屏的使用场景，这时的断点会由 sm 变为 md。
如下代码，监听了 sm、md、lg 三种设备形态，当设备形态变革，会重新写入 storage 数据，配合状态变量即可动态更新 UI。
import mediaQuery from '@ohos.mediaquery';
@Observed
export class MediaWatching {
private sm: string = '(width<600vp)'
private md: string = "(600vp<=width<840vp)"
private lg: string = "(840vp<=width)"
private type: 'sm' | 'md' | 'lg' = 'sm'
init() {
console.log("luvi > mediaQueryResult change " + this.type)
// 小尺寸屏
const smListener = mediaQuery.matchMediaSync(this.sm)
smListener.on('change', (mediaQueryResult) => {
this.onPortrait(mediaQueryResult)
})
// 中等尺寸屏
const mdListener = mediaQuery.matchMediaSync(this.md)
mdListener.on('change', (mediaQueryResult) => {
this.onPortrait(mediaQueryResult)
})
// 大尺寸屏
const lgListener = mediaQuery.matchMediaSync(this.lg)
lgListener.on('change', (mediaQueryResult) => {
this.onPortrait(mediaQueryResult)
})
}
onPortrait(mediaQueryResult: mediaQuery.MediaQueryResult) {
console.log("luvi > mediaQueryResult " + JSON.stringify(mediaQueryResult))
if (mediaQueryResult.matches) {
switch (mediaQueryResult.media as string) {
case this.sm:
this.type = 'sm'
break
case this.md:
this.type = 'md'
break
case this.lg:
this.type = 'lg'
break
default:
break
}
console.log("luvi > mediaQueryResult change " + this.type)
AppStorage.setOrCreate("currentMediaType", this.type)
}
}
} https://i-blog.csdnimg.cn/direct/5e09597daeae4db7b93aee6cc7bd64cb.png
3. 配合媒体查询做 Swiper() 轮播图分割效果
在上一步的媒体查询封装及初始化后，屏幕设备形态变革后的名称会保存在 AppStorage 中，以是我们在自界说组件中可及时获取存入的 currentMediaType ，配合 Swiper 相关接口，使用 .displayCount() 设置 Swiper 视窗内元素表现个数到达分割效果。
@Component
export struct MySwiper {
swiperList: number[] =
// 获取当前设备断点形态
@StorageProp("currentMediaType") currentMediaType: 'sm' | 'md' | 'lg' = 'sm'
build() {
Column() {
Swiper() {
ForEach(this.swiperList, (item: number, idx: number) => {
Row() {
Text(`图片${item}`)
.textAlign(TextAlign.Center)
.width("100%")
}
.borderRadius(10)
.width("100%")
.height(250)
.backgroundColor(idx % 2 == 0 ? "#ddd" : "#ffb0b0b0")
})
}
.itemSpace(10)
// 根据断点设置分割个数
// sm 小屏形态只展示 1 个，其他形态展示 2 个
.displayCount(this.currentMediaType == "sm" ? 1 : 2)
.autoPlay(true)
.borderRadius(10)
.clip(true)
}
}
}
4. 配合媒体查询做 Tab 栏 UI 展示位置变更
Tab 栏位置的变革与轮播图分栏同理，配合 storage 状态变量获取设备形态，对不同设备形态更改 Tab 栏标签的排列方向即可。
详细 Tab 代码可参考 gitee 源代码
// 获取当前设备断点形态
@StorageProp("currentMediaType") currentMediaType: 'sm' | 'md' | 'lg' = 'sm'
Tabs({ barPosition: BarPosition.End }) {
TabContent() {
// 标签页
...
}
TabContent() {
// 标签页
...
}
TabContent() {
// 标签页
...
}
}
// 对不同设备形态设置不同排列方向
.vertical(this.currentMediaType == 'sm' || this.currentMediaType == 'md' ? false : true)
5. 配合栅格结构做列表展示数量控制
栅格结构拥有独立的断点本领，不依靠与媒体查询接口，以是直接使用栅格结构的特性举行开辟即可。
栅格结构紧张由行和列构成，每一行可以分为若干列，在不同断点状态下展示不同数量的列数，根据这一特性，即可制作成在小屏幕上展示一列文本，在大屏幕上展示两列甚至多列文本。
以是我们可以直接对 GridRow 设置对应断点时展示的 GridCol 个数即可，无需对 GridCol 设置额外参数
GridRow({
columns: {
xs: 1, // 超小屏幕 1 列（如手表）
sm: 1, // 小屏幕 1 列
md: 2, // 中等屏幕 2 列
lg: 3// 大屏幕 3 列
},
gutter: 15 // gutter 表示各元素直接间隙尺寸
}) {
ForEach(this.dataList, (item: number, idx: number) => {
GridCol() {
Row() {
Text(`列表${item}`)
.textAlign(TextAlign.Center)
.width("100%")
}
.borderRadius(10)
.width("100%")
.height(130)
.backgroundColor("#eee")
}
})
}
总结
栅格结构拥有独立的断点本领，不依靠与媒体查询接口，以是直接使用栅格结构的特性举行开辟即可。
轮播图的分割效果与 Tab 栏的排列方式变革，同样可使用栅格结构举行实现，不用依靠媒体查询接口，因为栅格结构的 GridRow 组件有 onBreakpointChange 断点变革回调，可直接返回当组件宽度所在的断点区间。
GridRow(){
...
}
.onBreakpointChange((bp: string) => {
// 此处回调打印 xs / sm / md ...
})
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]