• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Flex
2
3弹性布局组件。
4
5>  **说明：**
6>
7>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 权限列表
11
12无
13
14
15## 子组件
16
17可以包含子组件。
18
19
20## 接口
21
22Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
23
24标准Flex布局容器。
25
26**参数：**
27
28| 参数名            | 参数类型                                     | 必填   | 默认值               | 参数描述                                     |
29| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
30| direction      | [FlexDirection](ts-appendix-enums.md#flexdirection)     | 否    | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。                 |
31| wrap           | [FlexWrap](ts-appendix-enums.md#flexwrap)     | 否    | FlexWrap.NoWrap   | Flex容器是单行/列还是多行/列排列。                     |
32| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign)    | 否    | FlexAlign.Start   | 子组件在Flex容器主轴上的对齐格式。                      |
33| alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign) | 否    | ItemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。                     |
34| alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign)   | 否    | FlexAlign.Start   | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
35
36
37## 示例
38
39```
40// Example 01
41@Entry
42@Component
43struct FlexExample1 {
44  build() {
45    Column() {
46      Column({ space: 5 }) {
47        Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')
48        Flex({ direction: FlexDirection.Row }) {
49          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
50          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
51          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
52          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
53        }
54        .height(70)
55        .width('90%')
56        .padding(10)
57        .backgroundColor(0xAFEEEE)
58
59        Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
60        Flex({ direction: FlexDirection.RowReverse }) {
61          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
62          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
63          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
64          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
65        }
66        .height(70)
67        .width('90%')
68        .padding(10)
69        .backgroundColor(0xAFEEEE)
70
71        Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%')
72        Flex({ direction: FlexDirection.Column }) {
73          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
74          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
75          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
76          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
77        }
78        .height(160)
79        .width('90%')
80        .padding(10)
81        .backgroundColor(0xAFEEEE)
82
83        Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
84        Flex({ direction: FlexDirection.ColumnReverse }) {
85          Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
86          Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
87          Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
88          Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
89        }
90        .height(160)
91        .width('90%')
92        .padding(10)
93        .backgroundColor(0xAFEEEE)
94      }.width('100%').margin({ top: 5 })
95    }.width('100%')
96  }
97}
98```
99
100![zh-cn_image_0000001219744189](figures/zh-cn_image_0000001219744189.gif)
101
102```
103// Example 02
104@Entry
105@Component
106struct FlexExample2 {
107  build() {
108    Column() {
109      Column({ space: 5 }) {
110        Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
111        Flex({ wrap: FlexWrap.Wrap }) {
112          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
113          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
114          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
115        }
116        .width('90%')
117        .padding(10)
118        .backgroundColor(0xAFEEEE)
119
120        Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
121        Flex({ wrap: FlexWrap.NoWrap }) {
122          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
123          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
124          Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
125        }
126        .width('90%')
127        .padding(10)
128        .backgroundColor(0xAFEEEE)
129
130        Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
131        Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) {
132          Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
133          Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
134          Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
135        }
136        .width('90%')
137        .height(120)
138        .padding(10)
139        .backgroundColor(0xAFEEEE)
140      }.width('100%').margin({ top: 5 })
141    }.width('100%')
142  }
143}
144```
145
146![zh-cn_image_0000001174264366](figures/zh-cn_image_0000001174264366.png)
147
148```
149// Example 03
150@Component
151struct JustifyContentFlex {
152  @Prop justifyContent : number
153
154  build() {
155    Flex({ justifyContent: this.justifyContent }) {
156      Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
157      Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
158      Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
159    }
160    .width('90%')
161    .padding(10)
162    .backgroundColor(0xAFEEEE)
163  }
164}
165
166@Entry
167@Component
168struct FlexExample3 {
169  build() {
170    Column() {
171      Column({ space: 5 }) {
172        Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
173        JustifyContentFlex({ justifyContent: FlexAlign.Start })
174
175        Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
176        JustifyContentFlex({ justifyContent: FlexAlign.Center })
177
178        Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
179        JustifyContentFlex({ justifyContent: FlexAlign.End })
180
181        Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
182        JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween })
183
184        Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
185        JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround })
186
187        Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
188        JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly })
189      }.width('100%').margin({ top: 5 })
190    }.width('100%')
191  }
192}
193```
194
195![zh-cn_image_0000001174582854](figures/zh-cn_image_0000001174582854.gif)
196
197```
198// Example 04
199@Component
200struct AlignItemsFlex {
201  @Prop alignItems : number
202
203  build() {
204    Flex({ alignItems: this.alignItems }) {
205      Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
206      Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
207      Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
208    }
209    .size({width: '90%', height: 80})
210    .padding(10)
211    .backgroundColor(0xAFEEEE)
212  }
213}
214
215@Entry
216@Component
217struct FlexExample4 {
218  build() {
219    Column() {
220      Column({ space: 5 }) {
221        Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%')
222        AlignItemsFlex({ alignItems: ItemAlign.Auto })
223
224        Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
225        AlignItemsFlex({ alignItems: ItemAlign.Start })
226
227        Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
228        AlignItemsFlex({ alignItems: ItemAlign.Center })
229
230        Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
231        AlignItemsFlex({ alignItems: ItemAlign.End })
232
233        Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%')
234        AlignItemsFlex({ alignItems: ItemAlign.Stretch })
235
236        Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%')
237        AlignItemsFlex({ alignItems: ItemAlign.Baseline })
238      }.width('100%').margin({ top: 5 })
239    }.width('100%')
240  }
241}
242```
243
244![zh-cn_image_0000001174422904](figures/zh-cn_image_0000001174422904.jpg)
245
246
247```
248// Example 05
249@Component
250struct AlignContentFlex {
251  @Prop alignContent: number
252
253  build() {
254    Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {
255      Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
256      Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
257      Text('3').width('50%').height(20).backgroundColor(0xD2B48C)
258    }
259    .size({ width: '90%', height: 90 })
260    .padding(10)
261    .backgroundColor(0xAFEEEE)
262  }
263}
264
265@Entry
266@Component
267struct FlexExample5 {
268  build() {
269    Column() {
270      Column({ space: 5 }) {
271        Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
272        AlignContentFlex({ alignContent: FlexAlign.Start })
273
274        Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
275        AlignContentFlex({ alignContent: FlexAlign.Center })
276
277        Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
278        AlignContentFlex({ alignContent: FlexAlign.End })
279
280        Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
281        AlignContentFlex({ alignContent: FlexAlign.SpaceBetween })
282
283        Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
284        AlignContentFlex({ alignContent: FlexAlign.SpaceAround })
285
286        Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
287        AlignContentFlex({ alignContent: FlexAlign.SpaceEvenly })
288      }.width('100%').margin({ top: 5 })
289    }.width('100%')
290  }
291}
292```
293
294![zh-cn_image_0000001174422906](figures/zh-cn_image_0000001174422906.gif)
295