当前位置：网站首页>Flex for openharmony container components
Flex for openharmony container components
2022-08-09 14:19:00 【lplj717】
Flex：Flexible layout container
Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
direction：子组件在Flex容器上排列的方向,默认：FlexDirection.Row
Row：主轴与行方向一致作为布局模式.
RowReverse：与Row方向相反方向进行布局.
Column：主轴与列方向一致作为布局模式.
ColumnReverse：与Column相反方向进行布局.
wrap：Flex容器是单行/列还是多行/列排列,默认：FlexWrap.NoWrap
NoWrap：Flex容器的元素单行/列布局,子项允许超出容器.
Wrap：Flex容器的元素多行/列排布,子项允许超出容器.
WrapReverse：Flex容器的元素反向多行/列排布,子项允许超出容器
justifyContent：子组件在Flex容器主轴上的对齐格式,默认：FlexAlign.Start
Start：元素在主轴方向首端对齐,第一个元素与行首对齐,同时后续的元素与前一个对齐.
Center：元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同.
End：元素在主轴方向尾部对齐, 最后一个元素与行尾对齐,其他元素与后一个对齐.
SpaceBetween：Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同.第一个元素与行首对齐,最后一个元素与行尾对齐.
SpaceAround：Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同.The distance from the first element to the beginning of the line and the distance from the last element to the end of the line are half the distance between adjacent elements.
SpaceEvenly：Flex主轴方向元素等间距布局,相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样.
alignItems：子组件在Flex容器交叉轴上的对齐格式,默认：ItemAlign.Stretch
alignContent：交叉轴中有额外的空间时,多行内容的对齐方式.仅在wrap为Wrap或WrapReverse下生效,默认：FlexAlign.Start
direction&wrap
效果如图：
代码：
@Entry
@Component
struct FlexT {
build() {
Column() {
Column({ space: 5 }) {
Text('direction:Row').fontSize(9).fontColor(0x000000).width('90%')
//横向布局
Flex({ direction: FlexDirection.Row }) {
Text('1').width('20%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(30).backgroundColor(0xD2B48C)
Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
}
.height(50)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:RowReverse').fontSize(9).fontColor(0x000000).width('90%')
//Horizontal reverse layout
Flex({ direction: FlexDirection.RowReverse }) {
Text('1').width('20%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(30).backgroundColor(0xD2B48C)
Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
}
.height(50)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
}
Text('direction:Column').fontSize(9).fontColor(0x000000).width('90%')
//列布局
Flex({ direction: FlexDirection.Column }) {
Text('1').width('20%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(30).backgroundColor(0xD2B48C)
Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
}
.height(50)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('direction:ColumnReverse').fontSize(9).fontColor(0x000000).width('90%')
//Columns are laid out in reverse
Flex({ direction: FlexDirection.ColumnReverse }) {
Text('1').width('20%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(30).backgroundColor(0xD2B48C)
Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
}
.height(50)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('NoWrap').fontSize(9).fontColor(0x000000).width('90%')
//Container single lineor列显示
Flex({ wrap: FlexWrap.NoWrap }) {
Text('1').width('40%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('40%').height(30).backgroundColor(0xD2B48C)
Text('3').width('40%').height(30).backgroundColor(0xF5DEB3)
}
.height(50)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('Wrap').fontSize(9).fontColor(0x000000).width('90%')
//The container has multiple linesor列显示
Flex({ wrap: FlexWrap.Wrap }) {
Text('1').width('40%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('40%').height(30).backgroundColor(0xD2B48C)
Text('3').width('40%').height(30).backgroundColor(0xF5DEB3)
}
.height(50)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('WrapReverse').fontSize(9).fontColor(0x000000).width('90%')
//Container reverse multilineor列显示
Flex({ wrap: FlexWrap.WrapReverse }) {
Text('1').width('40%').height(30).backgroundColor(0xF5DEB3)
Text('2').width('40%').height(30).backgroundColor(0xD2B48C)
Text('3').width('40%').height(30).backgroundColor(0xF5DEB3)
}
.height(50)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
}
.width('100%')
.height('100%')
}
}justifyContent
效果如图：
代码：
@Entry
@Component
struct FlexT {
build() {
Column() {
Column({ space: 5 }) {
Text('justifyContent:Start').fontSize(9).fontColor(0x000000).width('90%')
//元素在主轴方向首端对齐, 第一个元素与行首对齐,同时后续的元素与前一个对齐.
Flex({ justifyContent: FlexAlign.Start }) {
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)
Text('justifyContent:Center').fontSize(9).fontColor(0x000000).width('90%')
//元素在主轴方向中心对齐,第一个元素与行首的距离与最后一个元素与行尾距离相同.
Flex({ justifyContent: FlexAlign.Center }) {
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)
Text('justifyContent:End').fontSize(9).fontColor(0x000000).width('90%')
//元素在主轴方向尾部对齐, 最后一个元素与行尾对齐,其他元素与后一个对齐.
Flex({ justifyContent: FlexAlign.End }) {
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)
Text('justifyContent:SpaceBetween ').fontSize(9).fontColor(0x000000).width('90%')
//Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同. 第一个元素与行首对齐,最后一个元素与行尾对齐
Flex({ justifyContent: FlexAlign.SpaceBetween }) {
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)
Text('justifyContent:SpaceAround').fontSize(9).fontColor(0x000000).width('90%')
//Flex主轴方向均匀分配弹性元素,相邻元素之间距离相同. The distance from the first element to the beginning of the line and the distance from the last element to the end of the line are half the distance between adjacent elements
Flex({ justifyContent: FlexAlign.SpaceAround }) {
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)
Text('justifyContent:SpaceEvenly ').fontSize(9).fontColor(0x000000).width('90%')
//Flex主轴方向元素等间距布局, 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
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)
}
.width('100%')
.height('100%')
}
}
}alignItems
效果如图：
代码：
@Entry
@Component
struct FlexT {
build() {
Column() {
Column({ space: 5 }) {
Text('alignItems:Auto').fontSize(9).fontColor(0x000000).width('90%')
//子组件在Flex容器交叉轴上的对齐格式：默认配置
Flex({ alignItems: ItemAlign.Auto }) {
Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('alignItems:Start ').fontSize(9).fontColor(0x000000).width('90%')
//子组件在Flex容器交叉轴上的对齐格式：Align the head on the horizontal axis
Flex({ alignItems: ItemAlign.Start }) {
Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('alignItems:Center ').fontSize(9).fontColor(0x000000).width('90%')
//子组件在Flex容器交叉轴上的对齐格式：The horizontal axis is aligned in the middle
Flex({ alignItems: ItemAlign.Center }) {
Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('alignItems:End ').fontSize(9).fontColor(0x000000).width('90%')
//子组件在Flex容器交叉轴上的对齐格式：Align the bottom on the horizontal axis
Flex({ alignItems: ItemAlign.End }) {
Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('alignItems:Stretch').fontSize(9).fontColor(0x000000).width('90%')
//子组件在Flex容器交叉轴上的对齐格式：Fill will stretch across the axis,If dimension is not set,is the container size
Flex({ alignItems: ItemAlign.Stretch }) {
Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
Text('alignItems:Baseline').fontSize(9).fontColor(0x000000).width('90%')
//子组件在Flex容器交叉轴上的对齐格式：Align the reference line in the horizontal axis direction
Flex({ alignItems: ItemAlign.Baseline }) {
Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
}.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
}
.width('100%')
.height('100%')
}
}
}alignContent
效果如图：
代码：
@Entry
@Component
struct FlexT {
build() {
Column() {
Column({ space: 5 }) {
Text('alignContent:Start').fontSize(9).fontColor(0x000000).width('90%')
//交叉轴中有额外的空间时,多行内容的对齐方式：top of it
Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
}.width('90%').height(90)
.padding(10)
.backgroundColor(0xAFEEEE)
Text('alignContent:Center').fontSize(9).fontColor(0x000000).width('90%')
//交叉轴中有额外的空间时,多行内容的对齐方式：中间对其
Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {
Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
}.width('90%').height(90)
.padding(10)
.backgroundColor(0xAFEEEE)
Text('alignContent:End').fontSize(9).fontColor(0x000000).width('90%')
//交叉轴中有额外的空间时,多行内容的对齐方式：底部对其
Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) {
Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
}.width('90%').height(90)
.padding(10)
.backgroundColor(0xAFEEEE)
Text('alignContent:SpaceBetween ').fontSize(9).fontColor(0x000000).width('90%')
//交叉轴中有额外的空间时,多行内容的对齐方式：The distance between adjacent elements is the same,第一个元素与行首对齐,最后一个元素与行尾对齐
Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) {
Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
}.width('90%').height(90)
.padding(10)
.backgroundColor(0xAFEEEE)
Text('alignContent:SpaceAround ').fontSize(9).fontColor(0x000000).width('90%')
//交叉轴中有额外的空间时,多行内容的对齐方式：The distance between adjacent elements is the same.Half the distance between adjacent elements as,The distance between the first and last elements to the end of the line
Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
}.width('90%')
.height(90)
.padding(10)
.backgroundColor(0xAFEEEE)
Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0x000000).width('90%')
//交叉轴中有额外的空间时,多行内容的对齐方式：相邻元素之间的间距,The spacing between the first element and the beginning of the line,And the space between the last element and the end of the line is the same
Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly }) {
Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
}.width('90%').height(90)
.padding(10)
.backgroundColor(0xAFEEEE)
}
.width('100%')
.height('100%')
}
}
}边栏推荐
- Jetpack Compose - Image using Coli load network Image (including GIF, SVG)
- Jetpack Compose - the use of Image (picture)
- Zero Basic Learning CANoe Panel Design Catalog
- Operating system migration practice deploying MySQL database on openEuler
- NC161 二叉树的中序遍历
- NC192 二叉树的后序遍历
- NC53 删除链表的倒数第n个节点
- RobotFramework 之 库与关键字
- 华为ensp静态路由、DHCP
- 记一次 ERROR scheduler.AsyncEventQueue: Dropping event from queue shared导致OOM
猜你喜欢
随机推荐
RobotFramework 之 条件判断
远程控制软件-向日葵
数据增广
海康设备获取YV12图像-不用rtsp
Spark Sql之join on and和where
pytest 筛选用例
NC161 二叉树的中序遍历
NC7 买卖股票的最好时机(一)
系统可扩展性思考
X264性能优化
力扣学习路径
常用函数
微服务+微信小程序实现社区服务
vim常用命令
Jetpack Compose - remember, mutableStateOf, rememberSaveable
Firewalld防火墙基础
Column of openharmony container component
Jetpack Compose - the use of Image (picture)
企业公众号开通微信支付
TCP三次握手和四次挥手及拥塞控制