1# ColumnSplit 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @zju_ljz--> 5<!--Designer: @lanshouren--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9将子组件纵向布局，并在每个子组件之间插入横向分割线。 10 11> **说明：** 12> 13> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14## 子组件 15 16可以包含子组件。 17 18ColumnSplit通过分割线限制子组件的高度。初始化时，分割线位置根据子组件的高度来计算。初始化后，动态修改子组件的高度不生效，分割线位置保持不变，可通过拖动相邻分割线改变子组件高度。 19 20初始化后，动态修改[margin](ts-universal-attributes-size.md#margin)、[border](ts-universal-attributes-border.md#border)、[padding](ts-universal-attributes-size.md#padding)通用属性导致子组件尺寸大于相邻分割线间距的异常情况下，不支持拖动分割线改变子组件的高度。 21## 接口 22 23ColumnSplit() 24 25带分割线的子组件纵向布局。 26 27**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31## 属性 32 33除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 34 35> **说明：** 36> 37> ColumnSplit组件[通用属性clip](ts-universal-attributes-sharp-clipping.md)的默认值为true。 38 39### resizeable 40 41resizeable(value: boolean) 42 43设置分割线是否可拖拽。 44 45**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49**参数：** 50 51| 参数名 | 类型 | 必填 | 说明 | 52| ------ | ------- | ---- | ------------------------------------ | 53| value | boolean | 是 | 分割线是否可拖拽。设置为true时表示分割线可拖拽，设置为false时表示分割线不可拖拽。<br/>默认值：false <br />非法值：按默认值处理。 | 54 55### divider<sup>10+</sup> 56 57divider(value: ColumnSplitDividerStyle | null) 58 59设置分割线的margin。 60 61**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 62 63**系统能力：** SystemCapability.ArkUI.ArkUI.Full 64 65**参数：** 66 67| 参数名 | 类型 | 必填 | 说明 | 68| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 69| value | [ColumnSplitDividerStyle](#columnsplitdividerstyle10对象说明) \| null | 是 | 分割线的margin，即设置分割线与上下子节点的距离。<br/>默认值：null。当设置为null时，分割线上下margin为0.0vp。<br />非法值：按默认值处理。 | 70 71## ColumnSplitDividerStyle<sup>10+</sup>对象说明 72 73设置分割线与上下子节点的距离。 74 75**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 76 77**系统能力：** SystemCapability.ArkUI.ArkUI.Full 78 79| 名称 | 类型 | 只读 | 可选 | 说明 | 80| -------- | -------- | -------- | -------- | -------- | 81| startMargin | [Dimension](ts-types.md#dimension10) | 否 | 是 | 分割线与其上方子组件的距离。<br/>默认值：0 <br />非法值：按默认值处理。 | 82| endMargin | [Dimension](ts-types.md#dimension10) | 否 | 是 | 分割线与其下方子组件的距离。<br/>默认值：0 <br />非法值：按默认值处理。 | 83 84> **说明：** 85> 86> 与[RowSplit](ts-container-rowsplit.md)相同，ColumnSplit的分割线可调整上下两侧子组件的高度，子组件的高度调整范围受其最大最小高度限制。 87> 88> 支持[clip](ts-universal-attributes-sharp-clipping.md#clip12)、[margin](ts-universal-attributes-size.md#margin)等通用属性，未设置clip属性时，其默认值为true。 89 90## 事件 91 92支持[通用事件](ts-component-general-events.md)。 93 94## 示例 95 96ColumnSplit的基本用法：设置可拖动的纵向布局子组件。 97 98```ts 99// xxx.ets 100@Entry 101@Component 102struct ColumnSplitExample { 103 build() { 104 Column(){ 105 Text('The dividing line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') 106 ColumnSplit() { 107 Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 108 Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 109 Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 110 Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 111 Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 112 } 113 .borderWidth(1) 114 .resizeable(true) // 可拖动 115 .width('90%').height('60%') 116 }.width('100%') 117 } 118} 119``` 120 121 122
