1# ColumnSplit 2 3将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8## 子组件 9 10可以包含子组件。 11 12该组件会限制子组件的高度。初始化时，该组件的布局是按照子组件的高度来计算的。初始化后，后续动态修改子组件的高度则不生效，使用的高度为该组件分割线的间距，该高度可以通过手势移动分割线进行变更。 13## 接口 14 15ColumnSplit() 16 17 18## 属性 19 20| 名称 | 参数类型 | 描述 | 21|-----------------------|-------------------------------------------------------------------|---------------------------------| 22| resizeable | boolean | 分割线是否可拖拽，默认为false。 | 23| divider<sup>10+</sup> | [ColumnSplitDividerStyle](#columnsplitdividerstyle10对象说明) \| null | 设置分割线的margin。<br/>- DividerStyle：设置分割线与上下子节点的距离。<br/>- 默认为null：分割线上下margin为0。 | 24 25## ColumnSplitDividerStyle<sup>10+</sup>对象说明 26 27| 名称 | 参数类型 | 必填 | 描述 | 28| ----------- | ------------- | ---- |--------------------------| 29| startMargin | [Dimension](ts-types.md#dimension10) | 否 | 分割线与其上方子组件的距离。<br/>默认值：0 | 30| endMargin | [Dimension](ts-types.md#dimension10) | 否 | 分割线与其下方子组件的距离。<br/>默认值：0 | 31 32> **说明：** 33> 34> 与RowSplit相同，ColumnSplit的分割线可以改变上下两边子组件的高度，子组件可改变高度的范围取决于子组件的最大最小高度。 35> 36> 支持clip、margin等通用属性，clip不设置的时候默认值为true。 37 38 39## 示例 40 41```ts 42// xxx.ets 43@Entry 44@Component 45struct ColumnSplitExample { 46 build() { 47 Column(){ 48 Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') 49 ColumnSplit() { 50 Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 51 Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 52 Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 53 Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 54 Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 55 } 56 .borderWidth(1) 57 .resizeable(true) // 可拖动 58 .width('90%').height('60%') 59 }.width('100%') 60 } 61} 62``` 63 64 65
