当前位置：首页 > article >正文

非高峰期我

article 2025/1/24 8:47:39

四. 布局高级
今日核心：
线性布局
Flex 布局
线性布局
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。
间距
在布局容器内，可以通过 space 属性设置布局主方向方向上子元素的间距，使各子元素在布局主方向上有等间距效果。
Row
Column
布局主方向对齐方式
属性：justifyContent()
参数：枚举FlexAlign
属性
描述
Start
首端对齐
Center
居中对齐
End
尾部对齐
Spacebetween
两端对齐
子元素之间间距相等
SpaceAround
子元素两侧间距相等
第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
SpaceEvenly
相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
概念：
布局主方向在线性布局中叫做布局主轴
另外一条坐标轴叫做交叉轴
案例-得物-产品卡片
交叉轴对齐方式
以 Row 为例，主轴在水平方向，交叉轴在垂直方向
属性：alignItems()
参数：枚举类型VerticalAlign
注意：布局容器在交叉轴要有足够空间，否则无法生效
单个子元素交叉轴对齐方式
属性：alignSelf()
参数：枚举ItemAlign(Stretch拉伸，交叉轴拉伸效果)
自适应缩放
父容器尺寸确定时，设置了 layoutWeight 属性的子元素与兄弟元素占主轴尺寸按照权重进行分配。
属性：layoutWeight()
参数：数字
案例-用户关注
线性布局-Column
Column 主轴方向：垂直方向
Column 交叉轴方向：水平方向
案例-头条新闻
弹性布局（Flex）
换行
弹性布局分为单行布局和多行布局。默认情况下，Flex 容器中的子元素都排在一条线（又称“轴线”）上。子元素尺寸总和大于 Flex 容器尺寸时，子元素尺寸会自动挤压。
wrap 属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex 是单行布局还是多行布局。在多行布局时，通过交叉轴方向，确认新行排列方向。
参数：wrap
值：枚举 FlexWrap
主轴对齐方式
flex 主轴默认水平方向
参数: justifyContent
值: 枚举 FlexAlign
侧轴(交叉轴对齐方式)
flex 侧轴默认是垂直方向
换行后, 设置多行侧轴对齐方式
参数: alignContent
值: 枚举 FlexAlign
案例-阶段菜单
案例-微店商品
示例代码
ArkTS
复制代码
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
@Entry
.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( $KaTeX parse error: Expected '}', got '#' at position 394: \dots .fontColor('#̲f52555') \dots$ r(‘app.media.top5’))
.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)
}
}