The RowSplit component lays out child components horizontally and inserts a vertical divider between every two child components.
This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Child Components
Supported
This component limits the width of its child components through dividers. During initialization, the divider positions are calculated based on the width of its child components. After initialization, dynamic width modifications to child components do not affect divider positions. To adjust child component widths, drag the adjacent dividers.
After initialization, dynamic changes to the margin, border, or padding attributes may cause the width of the child components to exceed the allowable distance between adjacent dividers. In such cases, dividers cannot be dragged to adjust the width of the child components.
APIs
RowSplit()
Creates a horizontal split layout container with dividers between child components.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
[h2]resizeable
resizeable(value: boolean)
Sets whether the divider can be dragged.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | boolean | Yes | Whether the divider can be dragged. true: The divider can be dragged. false: The divider cannot be dragged. Default value: false Invalid values are treated as the default value. |
The divider of RowSplit can change the width of the left and right child components, but only to the extent that the resultant width falls within the maximum and minimum widths of the child components.
Example
This example demonstrates the basic usage of RowSplit, which allows you to create draggable, horizontally laid-out child components.
// xxx.ets
@Entry
@Component
struct RowSplitExample {
build() {
Column() {
Text('The second line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
RowSplit() {
Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}
.resizeable(true) // Draggable.
.width('90%').height(100)
}.width('100%').margin({ top: 5 })
}
} 