回复
HarmonyOS API：容器组件
joytrian
发布于 2023-3-24 16:46
浏览
0收藏
版本：v3.1 Beta
Column
更新时间: 2023-02-17 09:19
沿垂直方向布局的容器。
说明
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
可以包含子组件。
接口
Column(value?: {space?: string | number})
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
space | string | number | 否 | 纵向布局元素垂直方向间距。 从API version 9开始，space为负数时不生效。 默认值：0 |
属性
除支持通用属性外，还支持以下属性：
名称 | 参数类型 | 描述 |
alignItems | 设置子组件在水平方向上的对齐格式。 默认值：HorizontalAlign.Center | |
justifyContent8+ | 设置子组件在垂直方向上的对齐格式。 默认值：FlexAlign.Start |
示例
// xxx.ets
@Entry
@Component
struct ColumnExample {
build() {
Column() {
// 设置子元素垂直方向间距为5
Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column({ space: 5 }) {
Column().width('100%').height(30).backgroundColor(0xAFEEEE)
Column().width('100%').height(30).backgroundColor(0x00FFFF)
}.width('90%').height(100).border({ width: 1 })
// 设置子元素水平方向对齐方式
Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
// 设置子元素垂直方向的对齐方式
Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('90%').height(30).backgroundColor(0xAFEEEE)
Column().width('90%').height(30).backgroundColor(0x00FFFF)
}.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)
Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('90%').height(30).backgroundColor(0xAFEEEE)
Column().width('90%').height(30).backgroundColor(0x00FFFF)
}.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
}.width('100%').padding({ top: 5 })
}
}
ColumnSplit
更新时间: 2023-02-17 09:19
将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。
说明
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
可以包含子组件。
接口
ColumnSplit()
属性
名称 | 参数类型 | 描述 |
resizeable | boolean | 分割线是否可拖拽，默认为false。 |
说明
与RowSplit相同，ColumnSplit的分割线最小能拖动到刚好包含子组件。
在真机中查看拖动效果，预览器中不支持拖动。
示例
// xxx.ets
@Entry
@Component
struct ColumnSplitExample {
build() {
Column(){
Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
ColumnSplit() {
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}
.resizeable(true) // 可拖动
.width('90%').height('60%')
}.width('100%')
}
}
Counter
更新时间: 2023-02-17 09:19
计数器组件，提供相应的增加或者减少的计数操作。
说明
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
可以包含子组件。
接口
Counter()
事件
不支持通用事件和手势， 仅支持如下事件：
名称 | 功能描述 |
onInc(event: () => void) | 监听数值增加事件。 |
onDec(event: () => void) | 监听数值减少事件。 |
示例
// 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%")
}
}
GridCol
更新时间: 2023-02-17 09:19
栅格子组件，必须作为栅格容器组件(GridRow)的子组件使用。
说明
该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
可以包含单个子组件。
接口
GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})
参数：
参数名 | 类型 | 必填 | 说明 |
span | number | GridColColumnOption | 否 | 占用列数。span为0表示该元素不参与布局计算，即不会被渲染。 默认值：1。 |
offset | number | GridColColumnOption | 否 | 相对于前一个栅格子组件偏移的列数。 默认值：0。 |
order | number | GridColColumnOption | 否 | 元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。 默认值：0。 |
属性
参数名 | 类型 | 必填 | 说明 |
span | number | GridColColumnOption | 否 | 占用列数。span为0，意味着该元素不参与布局计算，即不会被渲染。 默认值：1。 |
offset | number | GridColColumnOption | 否 | 相对于前一个栅格子组件偏移的列数。 默认值：0。 |
order | number | GridColColumnOption | 否 | 元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。 默认值：0。 |
GridColColumnOption
参数名 | 参数类型 | 必填 | 参数描述 |
xs | number | 否 | 最小宽度类型设备。 |
sm | number | 否 | 小宽度类型设备。 |
md | number | 否 | 中等宽度类型设备。 |
lg | number | 否 | 大宽度类型设备。 |
xl | number | 否 | 特大宽度类型设备。 |
xxl | number | 否 | 超大宽度类型设备。 |
span、offset、order属性按照xs、sm、md、lg、xl、xxl的顺序具有“继承性”，未设置值的断点将会从前一个断点取值。
参数\断点 | xs | sm | md | lg | xl | xxl |
span | 2 | 2 | 3 | 3 | 4 | 4 |
offset | 2 | 2 | 3 | 5 | 5 | 5 |
order | 20 | 20 | 20 | 3 | 3 | 3 |
示例
请参考栅格容器示例代码(GridRow)
GridItem
更新时间: 2023-02-17 09:19
网格容器中单项内容容器。
说明
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
可以包含子组件。
接口
GridItem()
属性
名称 | 参数类型 | 描述 |
rowStart | number | 指定当前元素起始行号。 |
rowEnd | number | 指定当前元素终点行号。 |
columnStart | number | 指定当前元素起始列号。 |
columnEnd | number | 指定当前元素终点列号。 |
forceRebuild | boolean | 设置在触发组件build时是否重新创建此节点。 默认值：false |
selectable8+ | boolean | 当前GridItem元素是否可以被鼠标框选。 > 说明： > 外层Grid容器的鼠标框选开启时，GridItem的框选才生效。 默认值：true |
事件
名称 | 功能描述 |
onSelect(event: (isSelected: boolean) => void)8+ | GridItem元素被鼠标框选的状态改变时触发回调。 isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 |
示例
// xxx.ets
@Entry
@Component
struct GridItemExample {
@State numbers: string[] = Array.apply(null, { length: 16 }).map(function (item, i) {
return i.toString()
})
build() {
Column() {
Grid() {
GridItem() {
Text('4')
.fontSize(16)
.backgroundColor(0xFAEEE0)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}.rowStart(1).rowEnd(4)
ForEach(this.numbers, (item) => {
GridItem() {
Text(item)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}.forceRebuild(false)
}, item => item)
GridItem() {
Text('5')
.fontSize(16)
.backgroundColor(0xDBD0C0)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}.columnStart(1).columnEnd(5)
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.width('90%').height(300)
}.width('100%').margin({ top: 5 })
}
}
已于2023-3-24 16:46:50修改
赞
收藏
回复
相关推荐
