> 程序员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点，明天还得上班，睡觉睡觉，这篇就到这里吧，求关注哈
