鸿蒙结构响应差别设备

01.自适应结构

01.拉伸能力

flexGrow：设置父容器在主轴方向上的剩余空间分配给此属性地点组件的比例。
默认值
flexShrink：设置父容器压缩尺寸分配给此属性地点组件的比例。
父容器为column row时，默认值：0
父容器为flex时，默认值：1
02.均分能力

justifyContent：将变革的空间，均匀分配给容器组件内空白地域
常用的：SpaceBetween 两端对齐 SpaceAround：相邻元素之间间隔雷同，首尾一半 SpaceEvenly：均匀分配
03.占比能力

width：要设置的组件宽度
height：要设置的组件高度
layoutWeight：父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配
04.缩放能力

aspectRatio：指定当前组件的宽高比
05.延伸能力

延伸能力是指容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变革显示或隐蔽，隐蔽时可以通过滑动切换显示。实现的方式是通过 List 组件或 Scroll 组件
06.隐蔽能力

displayPriority：设置当前组件在结构容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐蔽。
07.折行能力

折行能力是指容器组件尺寸发生变革，当结构方向尺寸不足以显示完整内容时自动换行。折行能力通过使用 Flex折行结构 （将wrap属性设置为FlexWrap.Wrap）实现
02.响应式结构

01.断点

将窗口宽度划分为差别的范围（即断点），监听窗口尺寸变革，当断点改变时同步调解页面结构

02.媒体查询

媒体查询常用于下面两种场景：

• 针对设备和应用的属性信息（比如显示地域、深浅色、分辨率），设计出相匹配的结构。
  
• 当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面结构。
  
• 当设备尺寸发生改变的时候存储在AppStorage上面的值会发生改变就可以用来切换差别的设备尺寸的结构
  

1. import mediaquery from '@ohos.mediaquery';
2. const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)');
3. const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)');
4. const listenerMD: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(600vp<=width<840vp)');
5. const listenerLG: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(840vp<=width)');
7. @Entry
8. @Component
9. struct MediaQuery {
10.     // 2. 创建监听器
11.     @StorageProp("breakPoint") breakPoint:string = 'XS'
12.     // 3. 注册监听器
13.     aboutToAppear(): void {
14.         // 添加回调函数
15.         listenerXS.on('change', (res: mediaquery.MediaQueryResult) => {
16.             console.log('changeRes:', JSON.stringify(res))
17.             if(res.matches){
18.                 AppStorage.set('breakPoint','XS')
19.             }
20.         })
21.         listenerSM.on('change', (res: mediaquery.MediaQueryResult) => {
22.             console.log('changeRes:', JSON.stringify(res))
23.             if(res.matches){
24.                 AppStorage.set('breakPoint','SM')
25.             }
26.         })
27.             listenerMD.on('change', (res: mediaquery.MediaQueryResult) => {
28.                 console.log('changeRes:', JSON.stringify(res))
29.                 if(res.matches){
30.                     AppStorage.set('breakPoint','MD')
31.                 }
32.                     })
33.             listenerLG.on('change', (res: mediaquery.MediaQueryResult) => {
34.                 console.log('changeRes:', JSON.stringify(res))
35.                 if(res.matches){
36.                     AppStorage.set('breakPoint','LG')
37.                 }
38.             })
39. }
41. // 4. 移除监听器
42. aboutToDisappear(): void {
43.     listenerXS.off('change')
44.     listenerSM.off('change')
45.         listenerMD.off('change')
46.         listenerLG.off('change')
47. }
49. build() {
50.     Column(){
51.         Text(this.breakPoint)
52.             .fontSize(20)
53.             .fontWeight(600)
54.     }
55.     .width('100%')
56.         .height('100%')
57.         .justifyContent(FlexAlign.Center)
58.         }
59. }

复制代码

03.栅格结构

栅格体系以设备的水平宽度（屏幕密度像素值)，单位vp）作为断点依据，界说设备的宽度类型，形成了一套断点规则。开发者可根据需求在差别的断点区间实现差别的页面结构结果

1. @Entry
2. @Component
3. struct Demo10 {
4.   // 颜色数组
5.   build() {
6.     Column() {
7.       // GridRow 默认支持 4 个断点
8.       //  xs:(0vp<=width<320vp) 智能穿戴，比如手表
9.       //  sm:(320vp<=width<600vp) 手机
10.       //  md:(600vp<=width<840vp) 折叠屏
11.       //  lg:(840vp<=width) 平板
12.       GridRow({
13.         // 4个断点 和默认的一样
14.         breakpoints: { value: ['320vp', '600vp', '840vp'] },
15.         gutter: 10, // 子组件间隙
16.         // columns: 12 // 统一设计列数 默认 12
17.         columns: {
18.           // 不同的断点分别设置不同的列数
19.           xs: 2, // 超小
20.           sm: 4, // 手机竖屏
21.           md: 8, // 折叠，手机横屏
22.           lg: 12 // 大屏
23.         }
24.       }) {
25.         ForEach(Array.from({ length: 2 }), (item: string, index: number) => {
26.           GridCol({
27.             // 每一行 2 个子元素，span 怎么设置（占的行数）
28.             // span: 2, // 占用列数 这样设置所有断点都是 2 列
29.             // 支持不同断点分别设置不同的占用列数
30.             span: {
31.               xs: 2,
32.               sm: 2,
33.               md: 2,
34.               lg: 4
35.             },
36.             // offset 偏移列数 默认为 0
37.             // offset: 1, // 偏移一列
38.             // 支持不同断点分别设置偏移不同的列数
39.             offset: {
40.               // xs: 2,
41.               // sm: 1
42.             }
43.           }) {
44.             Text(index.toString())
45.               .height(50)
46.           }
47.           .border({ width: 1 })
48.         })
49.       }
50.       .border({ width: 1, color: Color.Orange })
51.       .width('90%')
52.       .height('90%')
53.     }
54.     .width('100%')
55.     .height('100%')
57.   }
58. }

复制代码

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