1# RowSplit 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可以包含子组件。 18 19RowSplit通过分割线限制子组件的宽度。初始化时，分割线位置根据子组件的宽度来计算。初始化后，动态修改子组件的宽度不生效，分割线位置保持不变，可以通过拖动相邻分割线改变子组件宽度。 20 21初始化后，动态修改[margin](ts-universal-attributes-size.md#margin)、[border](ts-universal-attributes-border.md#border)、[padding](ts-universal-attributes-size.md#padding)通用属性导致子组件宽度大于相邻分割线间距的异常情况下，不支持拖动分割线改变子组件的宽度。 22## 接口 23 24RowSplit() 25 26带分割线的子组件横向分隔布局。 27 28**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32## 属性 33 34除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 35 36> **说明：** 37> 38> RowSplit组件[通用属性clip](ts-universal-attributes-sharp-clipping.md)的默认值为true。 39 40### resizeable 41 42resizeable(value: boolean) 43 44设置分割线是否可拖拽。 45 46**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 47 48**系统能力：** SystemCapability.ArkUI.ArkUI.Full 49 50**参数：** 51 52| 参数名 | 类型 | 必填 | 说明 | 53| -------- | -------- | -------- | -------- | 54| value | boolean | 是 | 分割线是否可拖拽。设置为true时表示分割线可拖拽，设置为false时表示分割线不可拖拽。<br/>默认值：false <br />非法值：按默认值处理。 | 55 56> **说明：** 57> 58> RowSplit的分割线可以改变左右两边子组件的宽度，子组件可改变宽度的范围取决于子组件的最大最小宽度。 59 60## 事件 61 62支持[通用事件](ts-component-general-events.md)。 63 64## 示例 65 66RowSplit的基本用法。设置可拖动的、横向布局的子组件。 67 68```ts 69// xxx.ets 70@Entry 71@Component 72struct RowSplitExample { 73 build() { 74 Column() { 75 Text('The second line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') 76 RowSplit() { 77 Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 78 Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 79 Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 80 Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 81 Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 82 } 83 .resizeable(true) // 可拖动 84 .width('90%').height(100) 85 }.width('100%').margin({ top: 5 }) 86 } 87} 88``` 89 90 91
