弹性布局容器
以弹性方式布局子组件的容器组件。
说明
- 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
- Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
- Flex组件主轴默认不设置时撑满父容器,Column、Row组件主轴不设置时默认是跟随子节点大小。
权限列表
无
子组件
可以包含子组件。
接口
Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
标准Flex布局容器。详细指导请参考弹性布局。
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
---|---|---|---|---|
direction | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向,即主轴的方向。 | |
wrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。 说明: 在多行布局时,通过交叉轴方向,确认新行堆叠方向。 | |
justifyContent | 否 | FlexAlign.Start | 所有子组件在Flex容器主轴上的对齐格式。 | |
alignItems | 否 | ItemAlign.Start | 所有子组件在Flex容器交叉轴上的对齐格式。 | |
alignContent | 否 | FlexAlign.Start | 交叉轴中有额外的空间时,多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
ArkUI 开发框架为了方便开发者实现灵活的页面布局方式,提供了弹性布局 Flex
,它用来为盒装模型提供最大的灵活性。 Flex
和 Row
、 Column
组件一样,也有主轴和纵轴之分。
Flex定义介绍
interface FlexInterface {
(value?: FlexOptions): FlexAttribute;
}
declare interface FlexOptions {
direction?: FlexDirection;
wrap?: FlexWrap;
justifyContent?: FlexAlign;
alignItems?: ItemAlign;
alignContent?: FlexAlign;
}
-
value:设置子组件的排列样式,
FlexOptions
定义了以下几种样式:-
direction:设置子组件的的排列方向即主轴方向,
FlexDirection
定义了以下4种排列方式:-
Row(默认值):子组件水平排列,即主轴为水平方向纵轴为竖直方向,子组件由左向右排列。
-
-
Flex({direction: FlexDirection.Row}) {
Text('Text1')
.fontSize(16)
.padding(10)
.backgroundColor("#aabbcc")
Text('Text2')
.fontSize(16)
.padding(10)
.backgroundColor("#bbaacc")
Text('Text3')
.fontSize(16)
.padding(10)
.backgroundColor("#ccaabb")
Text('Text4')
.fontSize(16)
.padding(10)
.backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)
样例运行结果如下图所示:
RowReverse:子组件水平排列,即主轴为水平方向纵轴为竖直方向,子组件由右向左排列。
Flex({direction: FlexDirection.RowReverse}) {
Text('Text1')
.fontSize(16)
.padding(10)
.backgroundColor("#aabbcc")
Text('Text2')
.fontSize(16)
.padding(10)
.backgroundColor("#bbaacc")
Text('Text3')
.fontSize(16)
.padding(10)
.backgroundColor("#ccaabb")
Text('Text4')
.fontSize(16)
.padding(10)
.backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)
样式:
Column:子组件竖直排列,即主轴为垂直方向,起点在上边,子组件由上到下排列。
ColumnReverse:子组件竖直排列,即主轴为垂直方向,起点在下边,子组件由下到上排列。
样例运行结果如下图所示:
wrap:设置子组件是单行/列还是多行/列排序, FlexWrap
提供了以下3种类型:
-
NoWrap(默认值):子组件单行/列排序,子组件不允许超出容器。
Wrap:子组件多行/列排序,子组件允许超出容器。
WrapReverse:子组件反向多行/列排序,子组件允许超出容器
Flex({direction: FlexDirection.Row, wrap: FlexWrap.WrapReverse}) {
Text('Text1')
.fontSize(16)
.padding(10)
.backgroundColor("#aabbcc")
Text('Text2')
.fontSize(16)
.padding(10)
.backgroundColor("#bbaacc")
Text('Text3')
.fontSize(16)
.padding(10)
.backgroundColor("#ccaabb")
Text('Text4')
.fontSize(16)
.padding(10)
.backgroundColor("#abcabc")
Text('Text5')
.fontSize(16)
.padding(10)
.backgroundColor("#aabbcc")
Text('Text6')
.fontSize(16)
.padding(10)
.backgroundColor("#cabcab")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)
justifyContent:设置子组件在主轴上的对齐方式, FlexAlign
提供了以下 6 种对齐方式:
-
Start(默认值):元素在主轴方向首端对齐, 第一个元素与行首对齐,同时后续的元素与前一个对齐。
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start}) {
Text('Text1')
.fontSize(16)
.padding(10)
.backgroundColor("#aabbcc")
Text('Text2')
.fontSize(16)
.padding(10)
.backgroundColor("#bbaacc")
Text('Text3')
.fontSize(16)
.padding(10)
.backgroundColor("#ccaabb")
Text('Text4')
.fontSize(16)
.padding(10)
.backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)
Center:元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同。
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Center}) {
Text('Text1')
.fontSize(16)
.padding(10)
.backgroundColor("#aabbcc")
Text('Text2')
.fontSize(16)
.padding(10)
.backgroundColor("#bbaacc")
Text('Text3')
.fontSize(16)
.padding(10)
.backgroundColor("#ccaabb")
Text('Text4')
.fontSize(16)
.padding(10)
.backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)
End:元素在主轴方向尾部对齐, 最后一个元素与行尾对齐,其他元素与后一个对齐。
SpaceBetween: Flex
主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素与行首对齐,最后一个元素与行尾对齐。
SpaceAround: Flex
主轴方向均匀分配弹性元素,相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半。
SpaceEvenly: Flex
主轴方向元素等间距布局, 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
alignItems:设置子组件在纵轴方向上的排列方式, ItemAlign
定义了以下 6 种排列方式:
-
Auto:自动布局,简单样例如下所示:
@Entry
@Component
struct Tanxing {
@State message: string = 'Hello World'
build() {
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Auto}) {
Text('Text1')
.fontSize(16)
.size({width: 50, height: 20})
.backgroundColor("#aabbcc")
Text('Text2')
.fontSize(16)
.size({width: 60, height: 30})
.backgroundColor("#bbaacc")
Text('Text3')
.fontSize(16)
.size({width: 70, height: 40})
.backgroundColor("#ccaabb")
Text('Text4')
.fontSize(16)
.size({width: 80, height: 50})
.backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)
}
}
Start:起始对齐,简单样例如下所示:
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start}) {
Text('Text1')
.fontSize(16)
.size({width: 50, height: 20})
.backgroundColor("#aabbcc")
Text('Text2')
.fontSize(16)
.size({width: 60, height: 30})
.backgroundColor("#bbaacc")
Text('Text3')
.fontSize(16)
.size({width: 70, height: 40})
.backgroundColor("#ccaabb")
Text('Text4')
.fontSize(16)
.size({width: 80, height: 50})
.backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)
Center:居中对齐,简单样例如下所示:
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) {
Text('Text1')
.fontSize(16)
.size({width: 50, height: 20})
.backgroundColor("#aabbcc")
Text('Text2')
.fontSize(16)
.size({width: 60, height: 30})
.backgroundColor("#bbaacc")
Text('Text3')
.fontSize(16)
.size({width: 70, height: 40})
.backgroundColor("#ccaabb")
Text('Text4')
.fontSize(16)
.size({width: 80, height: 50})
.backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)
End:末尾对齐,简单样例如下所示:
Baseline:基线对齐,简单样例如下所示:
Stretch(默认值):
alignContent:当纵轴有额外的空间时,多行内容的对齐方式。该属性仅在 wrap 属性为 Wrap
或者 WrapReverse
时才生效, FlexAlign
定义了以下 6 种对齐方式:
-
Start(默认值):设置子组件在纵轴方向首部对齐。
Center:设置子组件在纵轴方向居中对齐。
End:设置子组件在纵轴方向尾部对齐。
SpaceBetween:设置子组件在纵轴方向等间距布局。
SpaceAround:设置子组件在纵轴方向间距布局,并且首尾子组件到 Flex
的间距是子组件间距的一半。
SpaceEvenly:设置子组件在纵轴方向等间距布局,并且首尾子组件到 Flex
的间距子组件之间的间距都相等。
官方多种案例:
// xxx.ets
@Entry
@Component
struct FlexExample1 {
build() {
Column() {
Column({ space: 5 }) {
Text('direction:Row').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.Row }) { // 子组件在容器主轴上行布局
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:RowReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.RowReverse }) { // 子组件在容器主轴上反向行布局
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:Column').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.Column }) { // 子组件在容器主轴上列布局
Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
}
.height(160)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:ColumnReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ direction: FlexDirection.ColumnReverse }) { // 子组件在容器主轴上反向列布局
Text('1').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('2').width('100%').height(40).backgroundColor(0xD2B48C)
Text('3').width('100%').height(40).backgroundColor(0xF5DEB3)
Text('4').width('100%').height(40).backgroundColor(0xD2B48C)
}
.height(160)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
示例2
// xxx.ets
@Entry
@Component
struct FlexExample2 {
build() {
Column() {
Column({ space: 5 }) {
Text('Wrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ wrap: FlexWrap.Wrap }) { // 子组件多行布局
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
}
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('NoWrap').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ wrap: FlexWrap.NoWrap }) { // 子组件单行布局
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
}
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('WrapReverse').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({ wrap: FlexWrap.WrapReverse , direction:FlexDirection.Row }) { // 子组件反向多行布局
Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
}
.width('90%')
.height(120)
.padding(10)
.backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
示例3
// xxx.ets
@Component
struct JustifyContentFlex {
justifyContent : number = 0;
build() {
Flex({ justifyContent: this.justifyContent }) {
Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
}
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
}
}
@Entry
@Component
struct FlexExample3 {
build() {
Column() {
Column({ space: 5 }) {
Text('justifyContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.Start }) // 子组件在容器主轴上首端对齐
Text('justifyContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.Center }) // 子组件在容器主轴上居中对齐
Text('justifyContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.End }) // 子组件在容器主轴上尾端对齐
Text('justifyContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.SpaceBetween }) // 子组件在容器主轴上均分容器布局,第一个子组件与行首对齐,最后一个子组件与行尾对齐。
Text('justifyContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.SpaceAround }) // 子组件在容器主轴上均分容器布局,第一个子组件到行首的距离和最后一个子组件到行尾的距离是相邻子组件之间距离的一半。
Text('justifyContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
JustifyContentFlex({ justifyContent: FlexAlign.SpaceEvenly }) // 子组件在容器主轴上均分容器布局,子组件之间的距离与第一子组件到行首、最后一个子组件到行尾的距离相等
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
示例4
// xxx.ets
@Component
struct AlignItemsFlex {
alignItems : number = 0
build() {
Flex({ alignItems: this.alignItems }) {
Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('33%').height(40).backgroundColor(0xD2B48C)
Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
}
.size({width: '90%', height: 80})
.padding(10)
.backgroundColor(0xAFEEEE)
}
}
@Entry
@Component
struct FlexExample4 {
build() {
Column() {
Column({ space: 5 }) {
Text('alignItems:Auto').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Auto }) // 子组件在容器交叉轴上首部对齐
Text('alignItems:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Start }) // 子组件在容器交叉轴上首部对齐
Text('alignItems:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Center }) // 子组件在容器交叉轴上居中对齐
Text('alignItems:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.End }) // 子组件在容器交叉轴上尾部对齐
Text('alignItems:Stretch').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Stretch }) // 子组件在容器交叉轴上拉伸填充
Text('alignItems:Baseline').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignItemsFlex({ alignItems: ItemAlign.Baseline }) // 子组件在容器交叉轴上与文本基线对齐
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
示例5
// xxx.ets
@Component
struct AlignContentFlex {
alignContent: number
build() {
Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {
Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
Text('3').width('50%').height(20).backgroundColor(0xD2B48C)
}
.size({ width: '90%', height: 90 })
.padding(10)
.backgroundColor(0xAFEEEE)
}
}
@Entry
@Component
struct FlexExample5 {
build() {
Column() {
Column({ space: 5 }) {
Text('alignContent:Start').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.Start }) // 多行布局下子组件首部对齐
Text('alignContent:Center').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.Center }) // 多行布局下子组件居中对齐
Text('alignContent:End').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.End }) // 多行布局下子组件尾部对齐
Text('alignContent:SpaceBetween').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.SpaceBetween }) // 多行布局下第一行子组件与列首对齐,最后一行子组件与列尾对齐
Text('alignContent:SpaceAround').fontSize(9).fontColor(0xCCCCCC).width('90%')
AlignContentFlex({ alignContent: FlexAlign.SpaceAround }) // 多行布局下第一行子组件到列首的距离和最后一行子组件到列尾的距离是相邻行之间距离的一半
Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0xCCCCCC).width('90%')
Flex({
wrap: FlexWrap.Wrap,
alignContent: FlexAlign.SpaceEvenly
}) { // 多行布局下相邻行之间的距离与第一行子组件到列首的距离、最后一行子组件到列尾的距离完全一样
Text('1').width('50%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('50%').height(20).backgroundColor(0xD2B48C)
Text('3').width('50%').height(20).backgroundColor(0xF5DEB3)
Text('4').width('50%').height(20).backgroundColor(0xD2B48C)
Text('5').width('50%').height(20).backgroundColor(0xF5DEB3)
}
.size({ width: '90%', height: 100 })
.padding({ left: 10, right: 10 })
.backgroundColor(0xAFEEEE)
}.width('100%').margin({ top: 5 })
}.width('100%')
}
}
计数器组件(Counter)
计数器组件,提供相应的增加或者减少的计数操作。
说明
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
可以包含子组件。
接口
Counter()
从API version 9开始,该接口支持在ArkTS卡片中使用。
属性
支持通用属性。
事件
不支持通用事件和手势, 仅支持如下事件:
名称 | 功能描述 |
---|---|
onInc(event: () => void) | 监听数值增加事件。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
onDec(event: () => void) | 监听数值减少事件。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
Counter 定义介绍
interface CounterInterface {
(): CounterAttribute;
}
由源码可知,Counter 使用时暂不需要配置额外参数。
简单样例如下所示:
@Entry @Component struct ComponentTest {
build() {
Column() {
Row() {
Counter() // 默认效果
Counter() { // 包含一个子组件
Text('1') // Text 默认值为 1
.fontSize(18) // Text 字体大小
}
}
.justifyContent(FlexAlign.SpaceAround)
.width("100%")
}
.width("100%")
.height("100%")
.padding(10)
}
}
样例运行结果如下图所示:
Counter 事件介绍
declare class CounterAttribute extends CommonMethod<CounterAttribute> {
onInc(event: () => void): CounterAttribute;
onDec(event: () => void): CounterAttribute;
}
Counter 没有提供额外的属性方法,只提供了 onInc()
和 onDec()
两个事件回调方法,各方法说明如下所示:
- onInc:数字增加的事件回调。
- onDec:数字减少的事件回调。
Counter 完整样例
@Entry
@Component
struct ComponentTes{
@State value: number = 0
build() {
Column() {
Counter() {
Text(this.value.toString())
.fontSize(18)
}
.onInc(() => { // 自增操作
this.value++;
})
.onDec(() => { // 自减操作
this.value--;
})
}
.width("100%")
.height("100%")
.padding(20)
}
}
官方案例:
// xxx.ets
@Entry
@Component
struct CounterExample {
@State value: number = 0
build() {
Column() {
Counter() {
Text(this.value.toString())
}.margin(100)
.onInc(() => {
this.value++
})
.onDec(() => {
this.value--
})
}.width("100%")
}
}