> 程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java相关开发、鸿蒙开发、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴！君志所向,一往无前！
---
1.弹性布局（Flex）
弹性布局分为单行布局和多行布局。
默认情况下，Flex 容器中的子元素都排在一条线（又称“轴线”）上。子元素尺寸总和大于 Flex 容器尺寸时，子元素尺寸会自动挤压。
wrap 属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex 是单行布局还是多行布局。
在多行布局时，通过交叉轴方向，确认新行排列方向。
参数：wrap
值：枚举 FlexWrap
示例代码：
@Entry
@Component
struct Index3{build() {Flex({wrap:FlexWrap.Wrap}) {Text().width(80).height(40).backgroundColor(Color.Pink).margin(5)Text().width(80).height(40).backgroundColor(Color.Orange).margin(5)Text().width(80).height(40).backgroundColor(Color.Pink).margin(5)Text().width(80).height(40).backgroundColor(Color.Orange).margin(5)Text().width(80).height(40).backgroundColor(Color.Pink).margin(5)Text().width(80).height(40).backgroundColor(Color.Orange).margin(5)}.width('100%').height(200).backgroundColor('#ccc')}
}
效果如下图所示：
2.综合实实践-商品列表
@Entry
@Component
struct Index{build() {Column() {Flex({ wrap: FlexWrap.Wrap }) {Column({ space: 8 }) {Image($r('app.media.xw')).width('100%').borderRadius({topLeft: 5, topRight: 5})Text('[ 程序员必备 ] 最高版本-格子衫').fontSize(12).maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}).padding({left: 10, right: 10})Text() {Span('￥666 ').fontSize(12).fontColor('#f52555')Span('销量666').fontSize(8).fontColor('#999')}.padding({left: 10, right: 10})}.width('47%').backgroundColor('#fff').margin({right: 10, bottom: 10}).borderRadius(5).alignItems(HorizontalAlign.Start).padding({bottom: 10})Column({ space: 8 }) {Image($r('app.media.xw')).width('100%').borderRadius({topLeft: 5, topRight: 5})Text('[ 程序员必备 ] 最高版本-格子衫').fontSize(12).maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}).padding({left: 10, right: 10})Text() {Span('￥888 ').fontSize(12).fontColor('#f52555')Span('销量888').fontSize(8).fontColor('#999')}.padding({left: 10, right: 10})}.width('47%').backgroundColor('#fff').margin({right: 10, bottom: 10}).borderRadius(5).alignItems(HorizontalAlign.Start).padding({bottom: 10})Column({ space: 8 }) {Image($r('app.media.xw')).width('100%').borderRadius({topLeft: 5, topRight: 5})Text('[ 程序员必备 ] 最高版本-格子衫').fontSize(12).maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}).padding({left: 10, right: 10})Text() {Span('￥333 ').fontSize(12).fontColor('#f52555')Span('销量666').fontSize(8).fontColor('#999')}.padding({left: 10, right: 10})}.width('47%').backgroundColor('#fff').margin({right: 10, bottom: 10}).borderRadius(5).alignItems(HorizontalAlign.Start).padding({bottom: 10})Column({ space: 8 }) {Image($r('app.media.xw')).width('100%').borderRadius({topLeft: 5, topRight: 5})Text('[ 程序员必备 ] 最高版本-格子衫').fontSize(12).maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}).padding({left: 10, right: 10})Text() {Span('￥444 ').fontSize(12).fontColor('#f52555')Span('销量666').fontSize(8).fontColor('#999')}.padding({left: 10, right: 10})}.width('47%').backgroundColor('#fff').margin({right: 10, bottom: 10}).borderRadius(5).alignItems(HorizontalAlign.Start).padding({bottom: 10})Column({ space: 8 }) {Image($r('app.media.xw')).width('100%').borderRadius({topLeft: 5, topRight: 5})Text('[ 程序员必备 ] 最高版本-格子衫').fontSize(12).maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}).padding({left: 10, right: 10})Text() {Span('￥555 ').fontSize(12).fontColor('#f52555')Span('销量666').fontSize(8).fontColor('#999')}.padding({left: 10, right: 10})}.width('47%').backgroundColor('#fff').margin({right: 10, bottom: 10}).borderRadius(5).alignItems(HorizontalAlign.Start).padding({bottom: 10})Column({ space: 8 }) {Image($r('app.media.xw')).width('100%').borderRadius({topLeft: 5, topRight: 5})Text('[ 程序员必备 ] 最高版本-格子衫').fontSize(12).maxLines(1).textOverflow({overflow: TextOverflow.Ellipsis}).padding({left: 10, right: 10})Text() {Span('￥444 ').fontSize(12).fontColor('#f52555')Span('销量444').fontSize(8).fontColor('#999')}.padding({left: 10, right: 10})}.width('47%').backgroundColor('#fff').margin({right: 10, bottom: 10}).borderRadius(5).alignItems(HorizontalAlign.Start).padding({bottom: 10})}}.width('100%').height('100%').backgroundColor('#f5f6f7').padding(10)}
}
3 层叠布局
3.1 层叠布局概述
层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。
层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
3.2 基本使用
Stack 组件为容器组件，容器内可包含各种子元素。其中子元素默认进行居中堆叠。
子元素被约束在Stack下，进行自己的样式定义以及排列。
@Entry
@Component
struct Index{build() {Column(){Stack() {Column(){}.width('90%').height(130).backgroundColor(Color.Gray)Text('text').width('60%').height('60%').backgroundColor(Color.Orange)Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')}.width('100%').height(150).backgroundColor(Color.Pink)}.margin(10)}
}
3.3 对齐方式
对齐方式
参数：alignContent
取值：枚举 Alignment
Stack({ alignContent: Alignment.BottomEnd }) {Column(){}.width('90%').height(130).backgroundColor(Color.Gray)Text('程序员Feri').width('60%').height('60%').backgroundColor(Color.Orange)Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')}.width('100%').height(150).backgroundColor(Color.Pink)
3.4 Z 序控制
属性：zIndex(数字)
特点：取值为整数数字，取值越大，显示层级越高
Stack({ alignContent: Alignment.BottomEnd }) {Column(){}.width('90%').height(130).backgroundColor(Color.Gray)Text('程序员Feri').width('60%').height('60%').backgroundColor(Color.Orange)Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')}.width('100%').height(150).backgroundColor(Color.Pink).margin(10)Stack({ alignContent: Alignment.BottomEnd }) {Column(){}.width('90%').height(130).backgroundColor(Color.Gray)Text('求关注').width('60%').height('60%').backgroundColor('rgba(0,0,0,0.3)')// Z 序：显示在按钮上一层.zIndex(1)Button('button').width('30%').height('30%').backgroundColor('#ff8ff3eb').fontColor('#000')}.width('100%').height(150).backgroundColor(Color.Pink).margin(10)
呀，不知不觉已经接近0点，明天还得上班，睡觉睡觉，这篇就到这里吧，求关注哈