鸿蒙布局响应不同设备

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.媒体查询

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

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

import mediaquery from '@ohos.mediaquery';
const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)');
const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)');
const listenerMD: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(600vp<=width<840vp)');
const listenerLG: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(840vp<=width)');

@Entry
@Component
struct MediaQuery {
    // 2. 创建监听器
    @StorageProp("breakPoint") breakPoint:string = 'XS'
    // 3. 注册监听器
    aboutToAppear(): void {
        // 添加回调函数
        listenerXS.on('change', (res: mediaquery.MediaQueryResult) => {
            console.log('changeRes:', JSON.stringify(res))
            if(res.matches){
                AppStorage.set('breakPoint','XS')
            }
        })
        listenerSM.on('change', (res: mediaquery.MediaQueryResult) => {
            console.log('changeRes:', JSON.stringify(res))
            if(res.matches){
                AppStorage.set('breakPoint','SM')
            }
        })
    	listenerMD.on('change', (res: mediaquery.MediaQueryResult) => {
        	console.log('changeRes:', JSON.stringify(res))
        	if(res.matches){
            	AppStorage.set('breakPoint','MD')
        	}
   		 })
    	listenerLG.on('change', (res: mediaquery.MediaQueryResult) => {
        	console.log('changeRes:', JSON.stringify(res))
        	if(res.matches){
            	AppStorage.set('breakPoint','LG')
        	}
    	})
}

// 4. 移除监听器
aboutToDisappear(): void {
    listenerXS.off('change')
    listenerSM.off('change')
	listenerMD.off('change')
	listenerLG.off('change')
}

build() {
    Column(){
        Text(this.breakPoint)
            .fontSize(20)
            .fontWeight(600)
    }
    .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
	}
}

03.栅格布局

栅格系统以设备的水平宽度（屏幕密度像素值)，单位vp）作为断点依据，定义设备的宽度类型，形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果

@Entry
@Component
struct Demo10 {
  // 颜色数组
  build() {
    Column() {
      // GridRow 默认支持 4 个断点
      //  xs:(0vp<=width<320vp) 智能穿戴，比如手表
      //  sm:(320vp<=width<600vp) 手机
      //  md:(600vp<=width<840vp) 折叠屏
      //  lg:(840vp<=width) 平板
      GridRow({
        // 4个断点 和默认的一样
        breakpoints: { value: ['320vp', '600vp', '840vp'] },
        gutter: 10, // 子组件间隙
        // columns: 12 // 统一设计列数 默认 12
        columns: {
          // 不同的断点分别设置不同的列数
          xs: 2, // 超小
          sm: 4, // 手机竖屏
          md: 8, // 折叠，手机横屏
          lg: 12 // 大屏
        }
      }) {
        ForEach(Array.from({ length: 2 }), (item: string, index: number) => {
          GridCol({
            // 每一行 2 个子元素，span 怎么设置（占的行数）
            // span: 2, // 占用列数 这样设置所有断点都是 2 列
            // 支持不同断点分别设置不同的占用列数
            span: {
              xs: 2,
              sm: 2,
              md: 2,
              lg: 4
            },
            // offset 偏移列数 默认为 0
            // offset: 1, // 偏移一列
            // 支持不同断点分别设置偏移不同的列数
            offset: {
              // xs: 2,
              // sm: 1
            }
          }) {
            Text(index.toString())
              .height(50)
          }
          .border({ width: 1 })
        })
      }
      .border({ width: 1, color: Color.Orange })
      .width('90%')
      .height('90%')
    }
    .width('100%')
    .height('100%')

  }
}