【鸿蒙开发实战】HarmonyOS之一多开发&项目搭建之自适应布局

前言

一、一多开发是什么意思？

一多开发是鸿蒙系统未来的趋势，

①页面适配问题 不同设备，屏幕尺寸、色彩风格，都存在差异
②功能兼容问题 不同设备，系统能力差异 eg.手机摄像头，手表测心率…
③工程如何组织 一个应用，实现一套代码工程，将来同时部署到多个设备

二、为了解决什么问题？

页面适配问题：界面级一多（重点掌握）
功能兼容问题：功能级一多（了解）
工程如何组织：工程级一多（重点掌握）

三、我们要掌握哪些知识、能力？

上面的3个问题，我们需要重点掌握页面适配问题和工程如何组织的问题，下面讲一页面适配问题的解决路径：界面级一多能力。
界面级一多能力有 2 类：

1.自适应布局: 略微调整界面结构
2.响应式布局：比较大的界面调整

用白话说，就是在格局较小变化的设备中，使用自适应布局；而在多终端切换的情况下使用响应式布局。

其中，自适应布局能力有以下几种：

布局能力有：拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力。
而响应式布局会根据设备显示器的大小，预先设置不同的取值范围对应不同的断点，适用于不同类型的设备。设计思路举例如下：

四、自适应布局的七种布局能力

（一）拉伸能力

正常未拉伸状态：

极限压缩状态：

极限拉伸状态：

同时使用拉伸和放大能力：

上述案例中使用的就是拉伸能力的自适应的布局方式： 实际上，拉伸能力包含压缩和拉伸两种能力

在拉动下方的Slider滑动条时，我们会发现，左、中、右的大小都会随之变化。 那么变化的规律是什么？是怎么使其变化的呢？

首先，我们要知道这个案例的关键参数。 ① containerWidth =

600，这个是绑定的默认宽度，即左、中、右没有压缩也没有拉伸时的正常宽度。

②使用Builder建立的滑动条，设置了最小值和最大值的参数，分别是400和1000，这在后面会用来条件拉伸的比率。

其次，我们要知道这个案例使用了什么调试方法。

调试时，使用一个大的盒子，设定宽度width(this.containerWidth)，其后的参数为@State标签修饰的变量，这个变量即Slilder滑动条组件的value值，使用双向绑定实时同步数值，预设值为600。在这个盒子中装入需要压缩、拉伸的小盒子。

在拉伸能力中用到的是flexShrink（压缩）和flexGrow（拉伸）两个属性，其后带的参数表示了压缩和拉伸的比例。（实践表明，调节其后的参数对实际的拉伸比例影响不大）

第三，极限压缩状态：中间的绿色方块，设定为宽300，高400，在横屏显示时可见其最小的状态是在压缩至极限时，此时的状态即为其所在的Row容器的设定大小（宽300，高400）。而两边的土灰色盒子则被压缩至大约原大小的三分之一左右。

第四，极限拉伸状态：两边的土灰色盒子的大小如其预先设定所在的Row容器大小一致（宽150，高400），而中间的绿色方块则被拉伸至最大，达到宽度约1000的大小。

小结：在上述操作中： （1）压缩和放大的比例不好准确推断，最好需要手动调试确认。

（2）但有一些可以提前确认的参数标准，即最大和最小的形状大小范围。 （3）拉伸能力所带的参数作用方式有待研究，但有时改变参数似乎影响不大。

（4）拉伸方法造成的图形大小会超出边框范围。

（5）收缩时，拉伸方法所在图形的大小不会小于原设定大小，放大时，收缩方法所在图形的大小不会大于原设定大小。（同一组件只使用压缩、放大一种能力）

（6）同一组件可以同时使用压缩、放大功能。

案例源码：

@Entry
@Component
struct Demo01 {
  // 绑定的宽度-默认 600
  @State containerWidth: number = 600
​
  // 底部滑块，可以通过拖拽滑块改变容器尺寸。
  @Builder
  sliderBuilder() {
    Slider({
      value: $$this.containerWidth, // 绑定的值
      min: 400, // 最小值
      max: 1000, // 最大值
      style: SliderStyle.OutSet // 滑块在滑轨上
    })
      .blockColor(Color.White)
      .width('60%')
      .position({ x: '20%', y: '80%' })
  }
​
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      // 标记现在的宽度
      Text('宽度:' + this.containerWidth)
        .zIndex(2)
        .translate({ x: 20, y: 20 })
        .fontColor(Color.Orange)
​
      // 核心区域
      Column() {
        Column() {
          Row() {
            // 布局能l力 1：拉伸能力：
            // 容器组件尺寸发生改变时，将变化的部分分配给容器内的【指定区域】
            //
​
            // 涉及属性：
            // flexShrink:压缩比例，默认值：Column，Row 时（0），Flex 时（1）
            // flexGrow:拉伸比例，默认值 0
​
            // 需求：
            // 1. 空间不足时：分配给左右，1：1
            // 2. 空间富余时：分配给中间
​
            // 左
            Row() {
              Text('左')
                .fontSize(20)
                .fontColor(Color.White)
            }
            .justifyContent(FlexAlign.Center)
            .width(150)
            .height(400)
            .backgroundColor('#c2baa6')
            .flexShrink(1)
​
            // 中
            Row() {
              Text('中')
                .fontSize(30)
                .fontColor(Color.White)
            }
            .width(300)
            .height(400)
            .backgroundColor('#68a67d')
            .justifyContent(FlexAlign.Center)
            .flexGrow(1)
            //.flexShrink(1) //可同时使用压缩、拉伸能力
​
​
            // 右
            Row() {
              Text('右')