HarmonyOS相应式布局

布局

自顺应布局

详情见开辟文档

1. https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/adaptive-layout-V13

复制代码

相应式布局

断点

• 以应用窗口为切入点，将应用窗口在宽维度上分成几个差异的区间即差异的断点，在差异的区间下，根据需求实现差异的页面布局效果
  
• 即将断点将窗口分别为差异的范围，监听窗口的变化（需使用到BreakpointSystem类）
  
• 
  
  
• 常见的监听断点变化的方法：
  
  
  
  • 获取窗口对象，并监听窗口尺寸变化
    
  • 通过媒体查询监听应用窗口尺寸变化
    
  • 借助栅格组件本领监听差异断点的变化
    
  
  

媒体查询

• 媒体查询作为相应式计划的焦点，在移动装备应用上非常广泛
  
• 媒体查询提供了丰富的媒体特性监听本领，监听表现地域的变化，横竖屏，深浅色，装备类型
  

案例一

breakPointSystem.ets

1. // common/breakpointsystem.ets
2. import { mediaquery } from '@kit.ArkUI'
4. //断点类型
5. export type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
7. //断点
8. export interface Breakpoint {
9.   //类型
10.   name: BreakpointType
11.   //值
12.   size: number
13.   //媒体查询的句柄，并包含了申请句柄时的首次查询结果。媒体查询根据设置的条件语句，
14.   // 比如'(width <= 600vp)'，比较系统信息，若首次查询时相关信息未初始化，matches返回false。
15.   // 定义MediaQuery监听器
16.   mediaQueryListener?: mediaquery.MediaQueryListener
17. }
19. // 断点查询方法类
20. export class BreakpointSystem {
22.   private static instance: BreakpointSystem
23.   //断点值(设置为只读)
24.   private readonly breakpoints: Breakpoint[] = [
25.     { name: 'xs', size: 0 },
26.     { name: 'sm', size: 320 },
27.     { name: 'md', size: 600 },
28.     { name: 'lg', size: 840 }
29.   ]
30.   //是一系列无序，没有重复数值的数据集合。
31.   private states: Set<BreakpointState<Object>>
33.   private constructor() {
34.     this.states = new Set()
35.   }
36. //获得实例
37.   public static getInstance(): BreakpointSystem {
38.     if (!BreakpointSystem.instance) {
39.       BreakpointSystem.instance = new BreakpointSystem();
40.     }
41.     return BreakpointSystem.instance
42.   }
44.   //增加状态（给set集合中添加状态）
45.   public attach(state: BreakpointState<Object>): void {
46.     this.states.add(state)
47.   }
49.   //删除状态（从set集合中删除状态）
50.   public detach(state: BreakpointState<Object>): void {
51.     this.states.delete(state)
52.   }
54.   public start() {
55.     // 遍历循环设置的断点值
56.     this.breakpoints.forEach((breakpoint: Breakpoint, index) => {
57.       //条件设置
58.       let condition: string
59.       if (index === this.breakpoints.length - 1) {
60.         condition = `(${breakpoint.size}vp<=width)`
61.       } else {
62.         condition = `(${breakpoint.size}vp<=width<${this.breakpoints[index + 1].size}vp)`
63.       }
64.       //设置媒体查询的查询条件，并返回对应的监听句柄。
65.       //mediaQueryListener 媒体查询的句柄，并包含了申请句柄时的首次查询结果。
66.       // 媒体查询根据设置的条件语句，比如'(width <= 600vp)'，
67.       // 比较系统信息，若首次查询时相关信息未初始化，matches返回false。
68.       // matchMediaSync：设置媒体查询的操作，并返回相对应的监听句柄（breakpoint.mediaQueryListener）
69.       breakpoint.mediaQueryListener = mediaquery.matchMediaSync(condition)
70.       // 判断是否满足匹配的条件
71.       if (breakpoint.mediaQueryListener.matches) {
72.         //更新状态
73.         this.updateAllState(breakpoint.name)
74.       }
75.       // 监听状态
76.       breakpoint.mediaQueryListener.on('change', (mediaQueryResult) => {
77.         if (mediaQueryResult.matches) {
78.           console.log(`当前屏幕状态态为:${breakpoint.name}`)
79.           console.log(`当前屏幕大小为:${breakpoint.size}`)
80.           AppStorage.setOrCreate('currentBreakpoint',breakpoint.name)
81.           //监听并更新状态
82.           this.updateAllState(breakpoint.name)
84.         }
85.       })
86.     })
87.   }
89.   private updateAllState(type: BreakpointType): void {
90.     this.states.forEach((state): Object | undefined => state.update(type))
91.   }
93.   public stop() {
94.     //停止监听并清除状态
95.     this.breakpoints.forEach((breakpoint: Breakpoint, index) => {
96.       if (breakpoint.mediaQueryListener) {
97.         breakpoint.mediaQueryListener.off('change')
98.       }
99.     })
100.     this.states.clear()
101.   }
102. }
104. // 可间断点可选项
105. export interface BreakpointOptions<T> {
106.   xs?: T
107.   sm?: T
108.   md?: T
109.   lg?: T
110.   xl?: T
111.   xxl?: T
112. }
114. export class BreakpointState<T extends Object> {
115.   public value: T | undefined = undefined;
116.   private options: BreakpointOptions<T>
118.   constructor(options: BreakpointOptions<T>) {
119.     this.options = options
120.   }
122.   // 开发者自定义对应断点的返回参数
123.   static of<T extends Object>(options: BreakpointOptions<T>): BreakpointState<T> {
124.     return new BreakpointState(options)
125.   }
127.   // 更新and返回开发者需要的且设置的值
128.   // breakpointType：断点的类型
129.   public update(type: BreakpointType) {
130.     if (type === 'xs') {
131.       //this.options.xs 开发者给予的值
132.       this.value = this.options.xs
133.       return this.value
134.     } else if (type === 'sm') {
135.       this.value = this.options.sm
136.       return this.value
137.     } else if (type === 'md') {
138.       this.value = this.options.md
139.       return this.value
140.     } else if (type === 'lg') {
141.       this.value = this.options.lg
142.       return this.value
143.     } else if (type === 'xl') {
144.       this.value = this.options.xl
145.       return this.value
146.     } else if (type === 'xxl') {
147.       this.value = this.options.xxl
148.       return this.value
149.     } else {
150.       this.value = undefined
151.       return this.value
152.     }
153.   }
154. }
155. // 创建断点枚举类，提供静态常量表示不同的断点
156. export class BreakpointTypeEnum {
157.   static readonly SM: string = 'sm'; // 小屏幕断点
158.   static readonly MD: string = 'md'; // 中等屏幕断点
159.   static readonly LG: string = 'lg'; // 大屏幕断点
160. }

复制代码

mediaquery.ets

• 设置变量吸收状态值
  
• 获取BreakpointSystem实例，并将状态值添加进去
  
• 获取BreakpointSystem实例，屏幕进行监听
  
• 将状态删除
  
• 取消监听屏幕
  

1. import { BreakpointSystem,BreakpointState } from '../common/breakPointSystem'
4. @Entry
5. @Component
6. struct Mediaquery {
7.   //设置状态值(是该状态返回显示的字符)
8.   @State compStr:BreakpointState<string> = BreakpointState.of({
9.     sm:"sm",
10.     md:"md",
11.     lg:"lg",
12.   })
13.   aboutToAppear(): void {
14.     //将设置好的状态值添加
15.     BreakpointSystem.getInstance().attach(this.compStr)
16.     //监听屏幕状态
17.     BreakpointSystem.getInstance().start()
18.   }
19.   aboutToDisappear(): void {
20.     //将状态删除
21.     BreakpointSystem.getInstance().detach(this.compStr)
22.     //取消监听屏幕状态
23.     BreakpointSystem.getInstance().stop()
24.   }
25.   build() {
26.     Column(){
27.       Text(this.compStr.value)
28.         .fontSize(24)
29.     }
30.     .width('100%')
31.     .height('100%')
32.     .justifyContent(FlexAlign.Center)
33.   }
34. }

复制代码

案例二

TabPage

1. import { DisplayUtil } from '@pura/harmony-utils'
2. import {
3.   BreakpointSystem,
4.   BreakpointState,
5.   BreakpointType,
6.   Breakpoint,
7.   BreakpointTypeEnum
8. } from '../common/breakPointSystem'
9. import Home from '../Component/Home'
10. // 学习地图
11. import Learning_map from '../Component/Learning_map'
12. import display from '@ohos.display'
15. class tabItem {
16.   title: string = ''
17.   tabIndex: number = 0
18.   Icon: ResourceStr = ''
19.   selectIcon: ResourceStr = ''
20. }
22. @Entry
23. @Component
24. struct TabPage {
25.   @Provide pageInfo: NavPathStack = new NavPathStack()
26.   @State foldStatusStr: string = ''
27.   @State compStr: BreakpointState<string> =
28.     BreakpointState.of({
29.       sm: 'sm',
30.       md: 'md',
31.       lg: 'lg'
32.     });
33.   //定义一个断点的初始值
34.   private BreakPointType_Lg: BreakpointType = 'lg';
36.   aboutToAppear(): void {
37.     //将定义的断点值添加至断点状态
38.     BreakpointSystem.getInstance().attach(this.compStr)
39.     //开始监听屏幕断点
40.     BreakpointSystem.getInstance().start()
41.     //监听可折叠设备的状态
42.     display.on('foldStatusChange', (data: display.FoldStatus) => {
43.       this.foldStatusStr = JSON.stringify(data)
44.       console.info(`<<< `+JSON.stringify(data))
45.       console.log(`<<<+++>>>${this.foldStatusStr}`)
46.       AppStorage.setOrCreate('foldStatusStr', this.foldStatusStr)
47.     })
49.   }
51.   aboutToDisappear(): void {
52.     //删除断点状态
53.     BreakpointSystem.getInstance().detach(this.compStr)
54.     //停止监听屏幕断点
55.     BreakpointSystem.getInstance().stop()
57.   }
59.   //使用@StorageProp 装饰器从存储中读取当前断点，默认值为中屏幕
60.   @StorageProp('currentBreakpoint') currentBreakPoint: BreakpointType = 'md'
61.   //定义标签页的索引
62.   @State currentIndex: number = 0
63.   //创建Tabs控制器
64.   private tabsController: TabsController = new TabsController()
66.   //定义构建器方法，创建标签项
67.   @Builder
68.   tabBarItem(tabItem: tabItem) {
69.     //创建垂直排列容器  间距为5
70.     Column({ space: 5 }) {
71.       //显示图片，根据是否选中采用不同的图片
72.       Image(this.currentIndex === tabItem.tabIndex ? tabItem.selectIcon : tabItem.Icon)
73.         .width(32)
74.         .aspectRatio(1)
75.         .objectFit(ImageFit.Contain)
76.       //标签文字，根据是否选中采用不同的颜色
77.       Text(tabItem.title)
78.         .font({
79.           size: 14,
80.           weight: 600
81.         })
82.         .fontColor(
83.           this.currentIndex === tabItem.tabIndex ?
84.           $r('sys.color.ohos_id_color_focused_outline') : '#3c3c3c'
85.         )
86.     }
87.     .width('100%')
88.     .height('100%')
89.     .justifyContent(FlexAlign.Center)
91.   }
93.   build() {
94.     Tabs({
95.       //Tab页签的一多适配
96.       barPosition: this.currentBreakPoint
97.         == BreakpointTypeEnum.LG ? BarPosition.Start : BarPosition.End
98.     }) {
99.       TabContent() {
100.         Home()
101.       }
102.       .tabBar(this.tabBarItem({
103.         title: '快速入门',
104.         tabIndex: 0,
105.         Icon: $r('app.media.ic_01_off'),
106.         selectIcon: $r('app.media.ic_01_on'),
107.       }))
109.       TabContent()
110.         .tabBar(this.tabBarItem({
111.           title: '课程学习',
112.           tabIndex: 1,
113.           Icon: $r('app.media.ic_02_off'),
114.           selectIcon: $r('app.media.ic_02_on'),
115.         }))
116.       TabContent() {
117.         Learning_map()
118.       }
119.       .tabBar(this.tabBarItem({
120.         title: '知识地图',
121.         tabIndex: 2,
122.         Icon: $r('app.media.ic_03_off'),
123.         selectIcon: $r('app.media.ic_03_on'),
124.       }))
125.     }
126.     // 页签切换进行截取
127.     .onContentWillChange((currentIndex, comingIndex) => {
128.       console.log(`当前的页签${currentIndex}`)
129.       console.log(`将要显示的页签${comingIndex}`)
130.       if (comingIndex === 2) {
131.         if (this.currentBreakPoint != BreakpointTypeEnum.SM) {
132.           this.pageInfo.pushPath({
133.             name: 'OnePage'
134.           })
135.         } else {
136.           this.pageInfo.clear()
137.         }
138.       }
139.       return true
140.     })
141.     // ********************灵魂！！！！
142.     // 用this.currentBreakPoint当前设备的值进行比对
143.     .barWidth(
144.       BreakpointState.of({
145.         sm: '100%',
146.         md: '100%',
147.         lg: '80vp'
148.       }).update(this.currentBreakPoint)
149.     )
150.     .onChange((index: number) => {
151.       //将当前索引变为点击的目标索引
152.       this.currentIndex = index
153.     })
154.     // 在确定制表符是否垂直时调用 默认false
155.     .vertical(this.currentBreakPoint == BreakpointTypeEnum.LG ? true : false)
157.   }
158. }

复制代码

Home

1. import {
2.   BreakpointSystem,
3.   BreakpointState,
4.   BreakpointType,
5.   Breakpoint,
6.   BreakpointTypeEnum
7. } from '../common/breakPointSystem'
9. @Entry
10. @Component
11. export default struct Home {
12.   @State compStr: BreakpointState<string> =
13.     BreakpointState.of({
14.       sm: 'sm',
15.       md: 'md',
16.       lg: 'lg'
17.     });
18.   //定义一个断点的初始值
19.   private BreakPointType_Lg: BreakpointType = 'lg';
20.   //使用@StorageProp 装饰器从存储中读取当前断点，默认值为中屏幕
21.   @StorageProp('currentBreakpoint') currentBreakPoint: BreakpointType = 'md'
22.   @State list_swiper: ResourceStr[] = [
23.     $r('app.media.banner_pic0'),
24.     $r('app.media.banner_pic1'),
25.     $r('app.media.banner_pic2'),
26.     $r('app.media.banner_pic3'),
27.     $r('app.media.banner_pic4'),
28.     $r('app.media.banner_pic5')
29.   ]
30.   @State list_Grid: Resource[] = [
31.     $r('app.media.enablement_pic1'),
32.     $r('app.media.enablement_pic2'),
33.     $r('app.media.enablement_pic3'),
34.     $r('app.media.enablement_pic4'),
35.     $r('app.media.enablement_pic5'),
36.     $r('app.media.enablement_pic6'),
37.     $r('app.media.enablement_pic7'),
38.     $r('app.media.enablement_pic8'),
39.   ]
41.   build() {
42.     Column() {
43.       //创建Swiper组件，显示轮播图 Swiper容器的一多适配
44.       Swiper() {
45.         ForEach(this.list_swiper, (item: ResourceStr) => {
46.           Image(item)
47.             .width('100%')
48.             .height(120)
49.             .borderRadius(12)
50.         })
51.       }
52.       .itemSpace(10)
53.       .padding(10)
54.       .autoPlay(true)
55.       .loop(true)
56.       //根据当前断点设置显示的项目数量
57.       .displayCount(
58.         BreakpointState.of({
59.           sm: 1,
60.           md: 2,
61.           lg: 2
62.         }).update(this.currentBreakPoint)
63.       )
64.       //设置显示模式为拉伸********************？
65.       .displayMode(SwiperDisplayMode.AutoLinear)
66.       //显示下一张卡片的间距
67.       .nextMargin(
68.         BreakpointState.of({
69.           sm: 0,
70.           md: 12,
71.           lg: 266
72.         }).update(this.currentBreakPoint)
73.       )
74.       //显示导航索引
75.       .indicator(
76.         this.currentBreakPoint == BreakpointTypeEnum.SM ?
77.         Indicator.dot()
78.           .color('#3c3c3c') : false
79.       )
82.       //Grid容器的一多适配
83.       Column() {
84.         Row() {
85.           Text('赋能套件')
86.           Row() {
87.             Text('更多')
88.             Image($r('app.media.ic_arrow'))
89.               .width(15)
90.           }
91.           .width(40)
92.           .justifyContent(FlexAlign.SpaceBetween)
93.         }
94.         .width('100%')
95.         .justifyContent(FlexAlign.SpaceBetween)
97.         //创建Grid容器
98.         Grid() {
99.           ForEach(this.list_Grid, (item: Resource) => {
100.             GridItem() {
101.               Column() {
102.                 //上图片
103.                 Image(item)
104.                   .width('100%')
105.                   .height('50%')
106.                 Column() {
107.                   Text('HarmonyOS 第一节课')
108.                     .maxLines(1)
109.                     .textOverflow({
110.                       overflow: TextOverflow.Ellipsis
111.                     })
112.                   Text('豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟')
113.                     .maxLines(2)
114.                     .textOverflow({
115.                       overflow: TextOverflow.Ellipsis
116.                     })
117.                     .fontSize(12)
118.                 }
119.                 .width('100%')
120.                 .height('50%')
121.                 .padding(5)
122.               }
123.               .width('100%')
124.               .aspectRatio(1)
125.               .borderRadius(16)
126.               .clip(true)
127.               .backgroundColor(Color.White)
128.             }
129.             //根据断点的不同，设置不同的GridItem宽度
130.             .width(
131.               BreakpointState.of({
132.                 sm: 160,
133.                 md: 164,
134.                 lg: 180
135.               }).update(this.currentBreakPoint)
136.             )
137.           })
138.         }
139.         .width('100%')
140.         .height(240)
141.         .rowsTemplate('1fr')
142.         //根据不同的断点设置Grid的列间距
143.         .columnsGap(
144.           BreakpointState.of({
145.             sm: 8,
146.             md: 12,
147.             lg: 20
148.           }).update(this.currentBreakPoint)
149.         )
150.         // 行与行的间距
151.         .rowsGap(10)
152.         .scrollBar(BarState.Off)
153.         // 设置滚动的效果
154.         .edgeEffect(EdgeEffect.Spring)
155.       }
157.       //List容器的一多适配
158.       Column() {
159.         // 文本图片
160.         Row() {
161.           Text('入门教程')
162.           Row() {
163.             Text('更多')
164.             Image($r('app.media.ic_arrow'))
165.               .width(15)
166.           }
167.           .width(40)
168.           .justifyContent(FlexAlign.SpaceBetween)
169.         }
170.         .width('100%')
171.         .justifyContent(FlexAlign.SpaceBetween)
173.         //创建List组件，用于显示列表布局
174.         List({ space: 10 }) {
175.           ForEach(this.list_Grid, (item: Resource) => {
176.             ListItem() {
177.               Row() {
178.                 Column() {
179.                   Text('Step1 鸿蒙世界快速入门介绍')
180.                     .fontSize(14)
181.                     .fontWeight(700)
182.                   Text('豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟')
183.                     .fontSize(12)
184.                     .maxLines(2)
185.                     .textOverflow({
186.                       overflow: TextOverflow.Ellipsis
187.                     })
188.                 }
189.                 .alignItems(HorizontalAlign.Start)
190.                 .width('66%')
192.                 Image(item)
193.                   .width('33%')
194.                   .borderRadius(12)
195.                   .height('70%')
196.               }
197.               .width('100%')
198.               .height(120)
199.               .backgroundColor(Color.White)
200.               .padding(10)
201.               .borderRadius(12)
202.             }
203.           })
204.         }
205.         //设置List列表的列数and列间距***************！
206.         .lanes(
207.           // 列的列数
208.           BreakpointState.of({
209.             sm: 1,
210.             md: 2,
211.             lg: 3
212.           }).update(this.currentBreakPoint),
213.           // 列间距
214.           BreakpointState.of({
215.             sm: 0,
216.             md: 12,
217.             lg: 16
218.           }).update(this.currentBreakPoint)
219.         )
220.       }
221.       .layoutWeight(1)
222.     }
223.     .width('100%')
224.     .height('100%')
225.     .padding(10)
226.     .backgroundColor('#f1f3f5')
227.   }
228. }

复制代码

Learning_map

1. import {
2.   BreakpointSystem,
3.   BreakpointState,
4.   BreakpointType,
5.   Breakpoint,
6.   BreakpointTypeEnum
7. } from '../common/breakPointSystem'
8. import display from '@ohos.display';
11. @Component
12. export default struct Learning_map {
13.   @State fold_state: string = ''
14.   @StorageProp('foldStatusStr') @Watch('display_str') foldStatusStr: string = '-1'
16.   display_str() {
17.     console.log(`<<<zz${this.foldStatusStr}`)
18.     if (this.foldStatusStr === '2') {
19.       this.pageInfo.clear()
20.     } else if (this.foldStatusStr === '1' || this.foldStatusStr === '3') {
21.       this.pageInfo.pushPath({
22.         name: 'OnePage'
23.       })
24.     }
25.   }
27.   @State compStr: BreakpointState<string> =
28.     BreakpointState.of({
29.       sm: 'sm',
30.       md: 'md',
31.       lg: 'lg'
32.     });
33.   // 获取监听中屏幕的尺寸
34.   @StorageProp('currentBreakpoint') currentBreakPoint: BreakpointType = 'md'
35.   @State list_: string[] = [
36.     '准备与学习',
37.     '构建应用',
38.     '应用测试',
39.     '上架',
40.     '运营增长',
41.     '商业变现'
42.   ]
43.   @Consume pageInfo: NavPathStack
45.   aboutToDisappear(): void {
47.     //console.log(`<<<<<<${this.foldStatusStr}`)
48.   }
50.   build() {
51.     Navigation(this.pageInfo) {
53.       Column() {
54.         Text('知识地图')
55.           .fontSize(30)
56.           .fontWeight(700)
57.         Image($r('app.media.knowledge_map_banner'))
58.           .width('100%')
59.           .borderRadius(16)
60.         Text('通过循序渐进的学习路径，无经验和有经验的开发者都可以轻松掌握ArkTS语言声明式开发范式，体验更简洁、更友好的HarmonyOS应用开旅程')
61.           .fontColor(Color.Gray)
62.           .width('100%')
63.           .fontSize(14)
64.           .margin({
65.             bottom: 20
66.           })
67.         List() {
68.           ForEach(this.list_, (item: string, index) => {
69.             ListItem() {
70.               Row() {
71.                 Row({ space: 5 }) {
72.                   Text(`0${index + 1}`)
73.                     .fontWeight(700)
74.                     .fontSize(18)
76.                   Text(item)
77.                     .fontSize(18)
78.                 }
80.                 Image($r('app.media.ic_arrow'))
81.                   .width(20)
82.               }
83.               .padding({
84.                 left: 10,
85.                 right: 10
86.               })
87.               .height(50)
88.               .width('100%')
89.               .justifyContent(FlexAlign.SpaceBetween)
90.               .onClick(() => {
91.                 this.pageInfo.pushPath({
92.                   name: 'OnePage'
93.                 })
94.               })
95.             }
96.           })
97.         }
98.         .layoutWeight(1)
99.       }
100.       .width('100%')
101.       .height('100%')
102.       .alignItems(HorizontalAlign.Start)
103.       .padding(10)
105.     }
106.     .hideTitleBar(true)
107.     .hideToolBar(true)
108.     // ！！！！！！！！！！！！！！！！！！
109.     /*.onNavigationModeChange((value) => {
110.       console.log(`Navigation页面当前折叠状态${JSON.stringify(value)}`)
111.       //0 为手机模式 NavigationMode.Stack
112.       //1 手机模式向平板模式展开中
113.       //手机模式
114.       if (value == NavigationMode.Stack) {
115.         this.pageInfo.clear()
116.         //如果是平板模式
117.       } else if (value == NavigationMode.Split) {
118.         this.pageInfo.pushPath({
119.           name: 'OnePage'
120.         })
121.       }
122.     })*/
123.     //
124.     .mode(NavigationMode.Auto)
125.     .width('100%')
126.   }
127. }

复制代码

breakPointSystem

1. // common/breakpointsystem.ets
2. import { mediaquery } from '@kit.ArkUI'
4. //断点类型
5. export type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
7. //断点
8. export interface Breakpoint {
9.   //类型
10.   name: BreakpointType
11.   //值
12.   size: number
13.   //媒体查询的句柄，并包含了申请句柄时的首次查询结果。媒体查询根据设置的条件语句，
14.   // 比如'(width <= 600vp)'，比较系统信息，若首次查询时相关信息未初始化，matches返回false。
15.   // 定义MediaQuery监听器
16.   mediaQueryListener?: mediaquery.MediaQueryListener
17. }
19. // 断点查询方法类
20. export class BreakpointSystem {
22.   private static instance: BreakpointSystem
23.   //断点值(设置为只读)
24.   private readonly breakpoints: Breakpoint[] = [
25.     { name: 'xs', size: 0 },
26.     { name: 'sm', size: 320 },
27.     { name: 'md', size: 600 },
28.     { name: 'lg', size: 840 }
29.   ]
30.   //是一系列无序，没有重复数值的数据集合。
31.   private states: Set<BreakpointState<Object>>
33.   private constructor() {
34.     this.states = new Set()
35.   }
36. //获得实例
37.   public static getInstance(): BreakpointSystem {
38.     if (!BreakpointSystem.instance) {
39.       BreakpointSystem.instance = new BreakpointSystem();
40.     }
41.     // BreakpointSystem的实例
42.     return BreakpointSystem.instance
43.   }
45.   //增加状态（给set集合中添加状态）
46.   public attach(state: BreakpointState<Object>): void {
47.     this.states.add(state)
48.   }
50.   //删除状态（从set集合中删除状态）
51.   public detach(state: BreakpointState<Object>): void {
52.     this.states.delete(state)
53.   }
55.   public start() {
56.     // 遍历循环设置的断点值
57.     this.breakpoints.forEach((breakpoint: Breakpoint, index) => {
58.       //条件设置
59.       let condition: string
60.       if (index === this.breakpoints.length - 1) {
61.         condition = `(${breakpoint.size}vp<=width)`
62.       } else {
63.         condition = `(${breakpoint.size}vp<=width<${this.breakpoints[index + 1].size}vp)`
64.       }
65.       //设置媒体查询的查询条件，并返回对应的监听句柄。
66.       //mediaQueryListener 媒体查询的句柄，并包含了申请句柄时的首次查询结果。
67.       // 媒体查询根据设置的条件语句，比如'(width <= 600vp)'，
68.       // 比较系统信息，若首次查询时相关信息未初始化，matches返回false。
69.       // matchMediaSync：设置媒体查询的操作，并返回相对应的监听句柄（breakpoint.mediaQueryListener）
70.       breakpoint.mediaQueryListener = mediaquery.matchMediaSync(condition)
71.       // 判断是否满足匹配的条件
72.       if (breakpoint.mediaQueryListener.matches) {
73.         //更新状态
74.         this.updateAllState(breakpoint.name)
75.       }
76.       // 监听状态
77.       breakpoint.mediaQueryListener.on('change', (mediaQueryResult) => {
78.         if (mediaQueryResult.matches) {
79.           console.log(`当前屏幕状态态为:${breakpoint.name}`)
80.           console.log(`当前屏幕大小为:${breakpoint.size}`)
81.           // 将屏幕状态存入到appStorage中
82.           AppStorage.setOrCreate('currentBreakpoint',breakpoint.name)
83.           //监听并更新状态
84.           this.updateAllState(breakpoint.name)
86.         }
87.       })
88.     })
89.   }
91.   private updateAllState(type: BreakpointType): void {
92.     this.states.forEach((state): Object | undefined => state.update(type))
93.   }
95.   public stop() {
96.     //停止监听并清除状态
97.     this.breakpoints.forEach((breakpoint: Breakpoint, index) => {
98.       if (breakpoint.mediaQueryListener) {
99.         breakpoint.mediaQueryListener.off('change')
100.       }
101.     })
102.     this.states.clear()
103.   }
104. }
106. // 可间断点可选项
107. export interface BreakpointOptions<T> {
108.   xs?: T
109.   sm?: T
110.   md?: T
111.   lg?: T
112.   xl?: T
113.   xxl?: T
114. }
116. export class BreakpointState<T extends Object> {
117.   public value: T | undefined = undefined;
118.   private options: BreakpointOptions<T>
120.   constructor(options: BreakpointOptions<T>) {
121.     this.options = options
122.   }
124.   // 开发者自定义对应断点的返回参数
125.   static of<T extends Object>(options: BreakpointOptions<T>): BreakpointState<T> {
126.     return new BreakpointState(options)
127.   }
129.   // 更新and返回开发者需要的且设置的值
130.   // breakpointType：断点的类型
131.   public update(type: BreakpointType) {
132.     if (type === 'xs') {
133.       //this.options.xs 开发者给予的值
134.       this.value = this.options.xs
135.       return this.value
136.     } else if (type === 'sm') {
137.       this.value = this.options.sm
138.       return this.value
139.     } else if (type === 'md') {
140.       this.value = this.options.md
141.       return this.value
142.     } else if (type === 'lg') {
143.       this.value = this.options.lg
144.       return this.value
145.     } else if (type === 'xl') {
146.       this.value = this.options.xl
147.       return this.value
148.     } else if (type === 'xxl') {
149.       this.value = this.options.xxl
150.       return this.value
151.     } else {
152.       this.value = undefined
153.       return this.value
154.     }
155.   }
156. }
157. // 创建断点枚举类，提供静态常量表示不同的断点
158. export class BreakpointTypeEnum {
159.   static readonly SM: string = 'sm'; // 小屏幕断点
160.   static readonly MD: string = 'md'; // 中等屏幕断点
161.   static readonly LG: string = 'lg'; // 大屏幕断点
162. }

复制代码

小结

1. TabPage
2. 1：设置对应的状态变量，从AppStorage中获取断点，判断当前的屏幕大小。
3.          (1)@Provide pageInfo:NavPathStack = new NavPathStack()
4. 2：在aboutToAppear
5.         （1）将断点值添加至断点状态
6.         （2）监听屏幕断点
7.         （3）监听可折叠设备的状态，并将其值存入到AppStorage中
8. 3：在aboutToDisappear
9.         （1）删除断点状态
10.         （2）停止监听屏幕断点
11. 4：使用@Buider自定义tabBar样式
12. 5：在tabs的value中进行断点判定
13.         （1）（barPosition: this.currentBreakPoint== BreakpointTypeEnum.LG ? BarPosition.Start : BarPosition.End）
14. 6：tabs属性操纵
15.         （1）.onContentWillChange：页签的切换进行截取，判断是否是要跳转至对应的页面且屏幕大小为不为sm，true向路由栈存取对应路由
16.         （2）barWidth：页签的宽度（需要进行断点判断）
17.         （3）vertical：确定页签的方向（需要进行断点判断）

复制代码

1. Home
2. 1：设置对应的状态变量
3. 2：主布局由Swiper，Grid，List容器进行布局
4. 3：Swiper
5.         （1）displayCount：设置子组件滑动显示数量（需要进行断点判断）
6.         （2）indicator：导航索引显示
7.         （3）nextMargin：下一张轮播图的间距
8. 4：Grid
9.         （1）根据断点的不同，需要设置不同的GridItem的宽度
10.         （2）columnsGap：根据断点的不同，设置Grid的列间距
11. 5：List
12.         （1）lanes：设置List列表的列数and列间距

复制代码

1. Learning_map
2. 1：设置对应状态变量
3.         （1）@Consume pageInfo:NaPathStack
4. 2：主布局由List来支撑
5.         （1）onNavigationModeChange：当导航模式变动时触发（折叠屏打开或者闭合会触发导航模式的变动）
6. 3：可以通过display.on('foldStatusChange',callback)来监听折叠屏幕的状态（打开还是折叠）
7.         （1）在TabPage中进行监听，将结果存入到AppStorage中，在Learing_map进行@Watch监听调用
8.         （2）进行监听判断，对pageInfo路由栈进行对应的操作

复制代码

样例图

栅格布局

• 根据装备的水平宽度，将差异屏幕的尺寸分别为差异数目的栅格来实现屏幕的自顺应
  
• 栅格多装备下通用辅助定位工具，通过将空间分割为有规律的栅格，显著降低适配差异屏幕尺寸的计划开辟及成本，是整体计划开辟流程更有秩序和节奏感
  

栅格容器的断点

• 提供了丰富的断点定制功能
  
• 开辟者可以修改断点取值范围，支持启用最多6个断点
  
• 1. value:['100vp','200vp']
  2. // 表示启动xs，sm，md三个断点
  3. // 小于100vp的为xs，100-200vp为sm，200以上为md
  5. value:['320vp','520vp','840vp','1080vp']
  6. // 表示启动xs，sm，md，lg，sl五个断点

  复制代码

GridRow

• 子组件只能是GridCol
  

参数

1. breakpoints
2.         value：自定义断点的范围
3.         reference：判断的目标        BreakpointsReference.WindowSize
4.                         WindowSize窗口大小，ComponentSize组件的大小
5. columns 规定忒定断点下将容器分割为多少个栅格
6. gutter 栅格与栅格之间的距离

复制代码

子组件

1. span：占据多少栅格
2. offset：偏移多少栅格

复制代码

属性

1. onBreakpointChange：当断点发生变化时触发回调，断点值可以是xs、sm、md、lg、xl、xxl

复制代码

样例一

1. @Entry
2. @Component
3. struct GridRow_Col {
4.   @State message: string = 'Hello World';
5.   @State current:string = 'unKnown'
6.   build() {
7.     Column(){
8.       GridRow({
9.         breakpoints:{
10.           //自定义断点范围，最多不超过5个
11.           value:['200vp','300vp','400vp','500vp','600vp'],
12.           //判断的目标 WindowSize窗口大小 ComponentSize组件大小
13.           reference:BreakpointsReference.WindowSize
14.         },
15.         //规定特定断点下将容器分割为多少个栅格
16.         columns:{
17.           xs:2,
18.           sm:4,
19.           md:8,
20.           lg:12,
21.           xl:16,
22.           xxl:20
23.         },
24.         //栅格与栅格之间的间距
25.         gutter:{
26.           x:'12vp'
27.         }
28.       }){
29.         GridCol({
30.           //占据多少栅格
31.           span:{
32.             xs:2,
33.             sm:4,
34.             md:1,
35.             lg:8,
36.             xl:12,
37.             xxl:12
38.           },
39.           //偏移多少栅格
40.           offset:{
41.             xs:0,
42.             sm:0,
43.             md:0,
44.             lg:2,
45.             xl:2,
46.             xxl:4
47.           }
48.         }){
49.           Column(){
50.             Text(this.current)
51.               .fontSize(30)
52.           }
53.           .border({
54.             width:1
55.           })
57.         }
58.         GridCol({
59.           //占据多少栅格
60.           span:{
61.             xs:2,
62.             sm:4,
63.             md:6,
64.             lg:8,
65.             xl:12,
66.             xxl:12
67.           },
68.           //偏移多少栅格
69.           offset:{
70.             xs:0,
71.             sm:0,
72.             md:0,
73.             lg:2,
74.             xl:2,
75.             xxl:4
76.           }
77.         }){
78.           Column(){
79.             Text(this.current)
80.               .fontSize(30)
81.           }
82.           .border({
83.             width:1
84.           })
86.         }
87.         GridCol({
88.           //占据多少栅格
89.           span:{
90.             xs:2,
91.             sm:4,
92.             md:1,
93.             lg:8,
94.             xl:12,
95.             xxl:12
96.           },
97.           //偏移多少栅格
98.           offset:{
99.             xs:0,
100.             sm:0,
101.             md:0,
102.             lg:2,
103.             xl:2,
104.             xxl:4
105.           }
106.         }){
107.           Column(){
108.             Text(this.current)
109.               .fontSize(30)
110.           }
111.           .border({
112.             width:1
113.           })
115.         }
117.       }
118.       .onBreakpointChange((currentBreakpoint:string) => {
119.         this.current = currentBreakpoint
120.       })
121.       .width('100%')
122.       .height('100%')
123.     }
124.     .width('100%')
125.     .height('100%')
126.   }
127. }

复制代码

样例图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。