Colum
在鸿蒙（HarmonyOS）开发中，Column组件通常用于垂直排列子组件。这意味着所有添加到Column中的子组件将沿着垂直轴排列。这种布局方式非常适合需要将多个组件堆叠在一起的情况，例如在一个页面上创建一个从上到下的布局。
在布局容器内，可以通过 space 属性设置布局主方向方向上子元素的间距，使各子元素在布局主方向上有等间距效果
Row
在鸿蒙（HarmonyOS）的ArkUI框架中，Row组件通常用于水平排列的布局容器，可以将多个子组件水平并排显示。这是一种非常常用的布局组件，适用于需要并排显示多个UI元素的场景。
在布局容器内，可以通过 space 属性设置布局主方向方向上子元素的间距，使各子元素在布局主方向上有等间距效果
主轴对齐方式
作用：设置容器中子元素在主轴上的对齐方式（作用到所有子元素身上）
属性：justifyContent()
基本语法：
Row(){}.justifyContent(FlexAlign.枚举值)
Column(){}.justifyContent(FlexAlign.枚举值)
| 属性 | 描述 |
|---|---|
| Start | 首端对齐 |
| Center | 居中对齐 |
| End | 尾部对齐 |
| Spacebetween | 两端对齐子元素之间间距相等 |
| SpaceAround | 子元素两侧间距相等第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半 |
| SpaceEvenly | 相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样 |
(justifyContent中Row和Colum的使用方法一致，在此展示一个Spacebetween)
交叉轴对齐方式
属性：alignItems()
参数：枚举类型VerticalAlign
注意：布局容器在交叉轴要有足够空间，否则无法生效
Column({}) {
Column() {
}.width('80%').height(50).backgroundColor(0xF5DEB3)
Column() {
}.width('80%').height(50).backgroundColor(0xD2B48C)
Column() {
}.width('80%').height(50).backgroundColor(0xF5DEB3)
}.width('100%').alignItems(HorizontalAlign.Start).backgroundColor('rgb(242,242,242)')
单个子元素交叉轴对齐方式
属性：alignSelf()
参数：枚举ItemAlign(Stretch拉伸，交叉轴拉伸效果)
Column() {
Row() {
Text('内容1')
.width(50)
.height(100)
.backgroundColor(Color.Red)
Text('内容2')
.width(50)
.height(100)
.backgroundColor(Color.Green)
.alignSelf(ItemAlign.Stretch)
Text('内容3')
.width(50)
.height(100)
.backgroundColor(Color.Blue)
.alignSelf(ItemAlign.Center)
}
.width('100%')
.height(200)
.backgroundColor(Color.Orange)
.alignItems(VerticalAlign.Bottom)
}
.height('100%')
.width('100%')
.backgroundColor(Color.Pink)
Grid
如果布局是由 很多的 行 和 列 所组成、行列可能需要合并、甚至滚动，就可以使用网格布局来实现
Grid() {
GridItem(){
// 展示的内容放在这里
}
GridItem(){
// 展示的内容放在这里
}
}
说明
- Grid的子组件必须是GridItem组件，需要展示的内容设置在 GridItem 内部既可
- GridItem 只能有一个子组件
- 宽高分为 2 种情况： a. Grid组件设置了宽高属性: 则其尺寸为设置值。 b. Grid组件没有设置宽高属性: Grid组件的尺寸默认继承y其父组件的尺寸。
| 名称 | 参数类型 | 描述 |
|---|---|---|
| columnsTemplate | string | 设置当前网格布局列的数量或最小列宽值，不设置时默认1列 例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。 |
| rowsTemplate | string | 设置当前网格布局行的数量或最小行高值，不设置时默认1行。 例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 |
| columnsGap | Length | 设置列与列的间距。 默认值：0 |
| rowsGap | Length | 设置行与行的间距。 默认值：0 |
Grid(){
ForEach([1,2,3,4,5,6,7,8,9,10,11,12],()=>{
GridItem(){
Column(){
Text('你好')
}
.height(`100%`)
.width(`100%`)
.border({width:1})
.backgroundColor(Color.Green)
}
})
}
.columnsTemplate(`1fr 1fr 1fr`) //每列
.rowsTemplate(`1fr 1fr 1fr 1fr`) //每行
.columnsGap(5) //列与列之间的间隔
.rowsGap(5) //行与行之间的间隔
.width('100%')
.height(500)
.backgroundColor(Color.Pink)
Scroll
当子组件的布局尺寸超过了Scroll的尺寸时，内容可以滚动
滚动容器Scroll—核心用法
用法说明：
- Scroll设置尺寸
- 设置溢出的子组件（只支持一个子组件）
- 滚动方向（支持横向和纵向，默认纵向）
Column(){
Scroll() {
// 只支持一个子组件
Column() {
// 内容放在内部
// 尺寸超过Scroll即可滚动
}
}
.width(`100%`)
.height(200)
}
@Extend(Text)
function Text_name(colo:ResourceColor,txt:string) {
.width('100%')
.height(100)
.textAlign(TextAlign.Center)
.fontSize(20)
.fontColor(Color.White)
.backgroundColor(colo)
.onClick(()=>{
AlertDialog.show({
message:txt
})
})
}
@Entry
@Component
struct Index {
build() {
Column(){
Scroll() {
Column({space:10}) {
Text('1')
.Text_name(Color.Blue,'文字1')
Text('1')
.Text_name(Color.Blue,'文字1')
Text('1')
.Text_name(Color.Blue,'文字1')
Text('1')
.Text_name(Color.Blue,'文字1')
Text('1')
.Text_name(Color.Blue,'文字1')
Text('1')
.Text_name(Color.Blue,'文字1')
Text('1')
.Text_name(Color.Pink,'文字1')
}
}
.padding(10)
.width(`100%`)
.height(400)
}
}
}
滚动容器Scroll—常见属性
| 名称 | 参数类型 | 描述 | ||
|---|---|---|---|---|
| scrollable | ScrollDirection | 设置滚动方向。 ScrollDirection.Vertical 纵向 ScrollDirection.Horizontal 横向 | ||
| scrollBar | BarState | 设置滚动条状态。 | ||
| scrollBarColor | string | number | Color | 设置滚动条的颜色。 |
| scrollBarWidth | string | number | 设置滚动条的宽度 | |
| edgeEffect | value:EdgeEffect | 设置边缘滑动效果。 EdgeEffect.None 无 EdgeEffect.Spring 弹簧 EdgeEffect.Fade 阴影 |
@Extend(Text)
function Text_name(colo:ResourceColor,txt:string) {
.width('100%')
.height(100)
.textAlign(TextAlign.Center)
.fontSize(20)
.fontColor(Color.White)
.backgroundColor(colo)
.onClick(()=>{
AlertDialog.show({
message:txt
})
})
}
@Entry
@Component
struct Index {
build() {
Column() {
Scroll() {
Column({ space: 10 }) {
Text('1')
.Text_name(Color.Blue, '文字1')
Text('1')
.Text_name(Color.Blue, '文字1')
Text('1')
.Text_name(Color.Blue, '文字1')
Text('1')
.Text_name(Color.Blue, '文字1')
Text('1')
.Text_name(Color.Blue, '文字1')
Text('1')
.Text_name(Color.Blue, '文字1')
Text('1')
.Text_name(Color.Pink, '文字1')
}
// .width('300%')
}
.padding(10)
.width(`100%`)
.height(400)
// 设置横向滚动
// .scrollable(ScrollDirection.Horizontal)
// 设置滚动条状态
.scrollBar(BarState.Auto)
// 设置滚动条颜色
.scrollBarColor(Color.Green)
// 设置滚动条宽度
.scrollBarWidth(25)
//设置边缘滑动效果
.edgeEffect(EdgeEffect.Spring)
}
}
}
