ColumnSplit
ColumnSplit
是 HarmonyOS 中的一个组件,用于将子组件纵向布局,并在每个子组件之间插入横向分割线。以下是其简易使用说明:
1. 支持版本与基本功能
- 从 API Version 7 开始支持,用于纵向布局子组件并插入分割线,分割线位置根据子组件高度计算。初始化后动态修改子组件高度不生效,但可通过拖动分割线改变子组件高度(受子组件最大最小高度限制)。
2. 子组件
ColumnSplit
可以包含子组件,如Text
等。在示例中,ColumnSplit
包含了多个Text
组件,每个Text
组件作为一个子项纵向排列。
3. 接口与属性
ColumnSplit()
接口:是创建ColumnSplit
组件的构造函数。从 API version 11 开始支持在元服务中使用,需要系统能力SystemCapability.ArkUI.ArkUI.Full
。resizeable
属性:用于设置分割线是否可拖拽。通过resizeable(value: boolean)
方法设置,value
为true
时分割线可拖动,false
为不可拖动,默认值为false
。例如在示例中,.resizeable(true)
设置了分割线可拖动。divider
属性(API 10+):用于设置分割线的margin
。通过divider(value: ColumnSplitDividerStyle | null)
方法设置,默认值为null
,即分割线上下margin
为 0。ColumnSplitDividerStyle
对象可设置分割线与其上方子组件(startMargin
)和下方子组件(endMargin
)的距离,两者默认值均为 0。
4. 使用示例
以下是一个简单的ColumnSplit
使用示例:
// xxx.ets
@Entry
@Component
struct ColumnSplitExample {
build() {
Column(){
// 提示文本
Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
ColumnSplit() {
// 子组件1
Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
// 子组件2
Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
// 子组件3
Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
// 子组件4
Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
// 子组件5
Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}
// 设置组件边框宽度
.borderWidth(1)
// 设置分割线可拖动
.resizeable(true)
// 设置组件宽度和高度
.width('90%').height('60%')
}.width('100%')
}
}
在上述示例中,首先创建了一个Column
组件,在其中添加了一个提示文本和一个ColumnSplit
组件。ColumnSplit
组件包含了 5 个Text
子组件,每个子组件设置了不同的背景色、宽度、高度和文本对齐方式。通过设置resizeable(true)
使分割线可拖动,borderWidth(1)
设置了ColumnSplit
组件的边框宽度,width('90%').height('60%')
设置了ColumnSplit
组件的宽度和高度。
注意事项:
- 初始化后动态修改
margin
、border
、padding
通用属性导致子组件尺寸大于相邻分割线间距时,不支持拖动分割线改变子组件高度。 - 支持
clip
、margin
等通用属性,clip
不设置时默认值为true
。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!