上一章已经了解了Column和Row的一些属性,以下是几个案例:
设置子组件水平方向的间距为:5
@Entry
@Preview
@Component
struct Index {
@State message: string = 'Hello 鸿蒙';
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Row({ space: 5 }) {
Row()
.width("30%")
.height(50)
.backgroundColor("red")
Row()
.width("30%")
.height(50)
.backgroundColor("blue")
}
.width("90%")
.height('100%')
.border({ width: 1 })
}
.height('100%')
.width('100%')
}
}
效果如图所示:
设置子元素垂直方向上的对齐方式:
@Entry
@Preview
@Component
struct Index {
@State message: string = 'Hello 鸿蒙';
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Row({ space: 5 }) {
Row()
.width("30%")
.height(50)
.backgroundColor("red")
Row()
.width("30%")
.height(50)
.backgroundColor("blue")
}
.width("90%")
.height('100%')
.border({ width: 1 })
.alignItems(VerticalAlign.Center)
}
.height('100%')
.width('100%')
}
}
效果如图所示:
其他的对齐方式,选择对应的属性即可。
ColumnSplit和RowSplit
ColumnSplit和RowSplit是在每一个子组件之间插入一条分隔线,ColumnSplit是横向分隔线,RowSplit是纵向的分隔线。
RowSplit使用方法如下:
@Entry
@Preview
@Component
struct Index {
@State message: string = 'Hello 鸿蒙';
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
RowSplit(){
Text("1")
.width(100)
.height(30)
.backgroundColor(0xF5DEB3)
Text("1")
.width(100)
.height(30)
.backgroundColor(0xF5DEB3)
Text("1")
.width(100)
.height(30)
.backgroundColor(0xF5DEB3)
}
.resizeable(true) // 是否可拖动
.width("90%").height(400)
}
.height('100%')
.width('100%')
}
}
效果如图:
ColumnSplit的用法也是类似的。
Flex
Flex组件是以弹性方式布局子元素,标准的Flex布局容器包含以下参数:
- direction:子组件在 flex 容器上排列的方向,也就是主轴方向。
- wrap:Flex 容器以单行/列 还是多行/列排列。
- justifyContent:子组件在 Flex 容器主轴上的对齐格式
- alignItems:子组件在 Flex 容器交叉轴的对齐方式
- alignContent:交叉轴上有额外空间的时候,多行内容的对齐方式,只有在 wrap 为Wrap或WrapReverse时生效。
比如:
Flex({direction:FlexDirection.Row}){
Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
}
效果如图:
今天先总结ColumnSplit、RowSplit和Flex三个组件