一次开发，多端部署--实例介绍

一、自适应布局

        1、拉伸能力

        容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域。 

Row() {
    // 通过flexGrow和flexShrink属性，将多余的空间全部分配给图片，将不足的控件全部分配给两侧的空白区域
    Row().width(150)
        .flexGrow(0).flexShrink(1)
    Image($r("app.media.illustrator")).width(400)
        .flexGrow(1).flexShrink(0)
    Row.width(150)
        .flexGrow(0).flexShrink(1)
}

        2、均分能力

         容器组件尺寸发生变化时，增加或减小的空间均匀分配给容器组件内所有空白区域。

Column() {
    Row() {
        ForEach(this.list, (item,number) => {...})
    .width('100%')
    // 均分父容器主轴方向的剩余空间
    .justifyContent(FlexAlign.SpaceEvenly)
    // 同上Row
    Row() { ... }  
}
.width(this.rate * 100 + '%')      

 

        3、占比能力

        子组件的宽或高按照预设的比例，随容器组件发生变化。

Row() {
    Column() { ... }
    .layoutWeight(1) // 设置子组件在父容器主轴方向的布局权重
    Column() { ... }
    .layoutWeight(1) // 设置子组件在父容器主轴方向的布局权重
    Column() { ... }
    .layoutWeight(1) // 设置子组件在父容器主轴方向的布局权重
}
.width(this.rate * 100 + '%')

 

        4、缩放能力

        子组件的宽高按照预设的比例，随容器组件发生变化，且变化过程中子组件的宽高比不变。

Column() {
    Column() {
        Image($r("app.media.illustrator"))
        .width('100%').height('100%')
    }
    .aspectRatio(1) // 固定宽高比
}
.height(this.sliderHeight)
.width(this.sliderWidth)

        5、延伸能力

         容器组件内的子组件，按照其在列表中的先后顺序，随容器组件尺寸变化显示或隐藏。

Row({ space: 10 })
    // 通过list组件实现隐藏能力
    List({ space: 10 }) {...}
    .listDirection(Axis.Horizontal)
    .width('100%')
}
.width(this.rate * 100 +'%')

        6、隐藏能力

        容器组件内的子组件，按照其预设的显示优先级，随容器组件尺寸变化显示或隐藏。相同显示优先级的子组件同时显示或隐藏。

Row() {
    Image($r("app.media.favorite"))
        .displayPriority(1) // 布局优先级
    Image($r("app.media.down"))
        .displayPriority(2) // 布局优先级
    Image($r("app.media.pause"))
        .displayPriority(3) // 布局优先级
    Image($r("app.media.next"))
        .displayPriority(2) // 布局优先级
    Image($r("app.media.list"))
        .displayPriority(1) // 布局优先级
}
.width(this.rate * 100 + '%')

        7、折行能力

        容器组件尺寸发生变化时，如果布局方向尺寸不足以显示完整内容，自动换行。

Column() {
    // 通过flex组件wrap参数实现自适应折行
    Flex({
        wrap: FlexWrap.Wrap,
        direction: FlexDirection.Row
    }) {
        Foreach(this.list, (item: Resource) => {
            Image(item).width(183).height(138)
        })
    }
    .width(this.rate * 100 + '%')
}

二、响应式布局

        1、断点

        断点常用范围： 

断点名称	取值范围(vp)
xs	[0, 320)
sm	[320, 600)
md	[600, 840)
lg	[840, +∞)

        2、栅格布局

        栅格组件将其所在的区域划分为有规律的多列，通过调整不同断点下的栅格组件的参数以及其子组件占据的列数等，实现不同的布局效果。

        

        

GridRow({
    columns:{ sm: 2, md: 8, lg: 12 },
    gutter: { x: '12vp' }
}) {
    GridCol({
        span: { sm: 4, md: 6, lg: 8 },
        offset: { sm: 8, ms: 1, lg: 2 }
    }) {
        Column() { ... }
    }
}

        （1）缩进布局

GridRow({
    columns:{ sm: 4, md: 8, lg: 12 },
    gutter: 24
}) {
    GridCol({
        span: { sm: 4, md: 6, lg: 8 },
        offset: { ms: 1, lg: 2 }
    }) {
        Column() { ... }.width('100%')
    }
}

         

         （2）挪移布局

GridRow({
    columns:{ sm: 4, md: 8, lg: 12 }
}) {
    GridCol({
        span: { sm: 4, md: 4, lg: 6 }
    }) { ... }
    GridCol({
        span: { sm: 4, md: 4, lg: 6 }
    }) { ... }
}.onBreakpointChange((breakpoint: string) => {
    this.currentBreakPoint = breakpoint
})

        

        （3）重复布局

GridRow({
    columns:{ sm: 4, md: 8, lg: 12 },
    gutter: 24
}) {
    ForEach(this.list, () => {
        GridCol({
            span: { sm: 4, md: 4, lg: 6 }
        }) { ... }
    })
}