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