HarmonyOS：ArkTS RowSplit 组件自学指南

2025-03-31
北京
本文字数：3350 字
阅读完需：约 11 分钟

在日常的 ArkTS 应用开发工作里，我常常要处理各种复杂的界面布局需求。尤其是在需要将多个子组件进行横向排列，并且希望用户能够灵活调整子组件宽度的场景下，传统的布局方式显得十分繁琐，难以满足动态交互的需求。直到我发现了 ArkTS 中的 RowSplit 组件，它就像一把钥匙，为我打开了灵活横向布局的大门。通过使用 RowSplit 组件，我能够轻松地将子组件横向布局，并在它们之间插入纵向分割线，用户还可以通过拖动分割线来改变子组件的宽度，大大提升了用户体验。为了帮助更多开发者掌握这个实用的组件，我决定撰写这篇自学指南。

一、ArkTS 应用框架与 RowSplit 组件概述

在 ArkTS 的应用框架中，涵盖了众多功能模块和组件，如 Ability Kit（程序框架服务）、Accessibility Kit（无障碍服务）、ArkData（方舟数据管理）等。而 RowSplit 组件属于 ArkUI（方舟 UI 框架）中的一部分，从 API Version 7 开始就被支持，从 API version 11 开始，其接口支持在元服务中使用，依赖的系统能力为 SystemCapability.ArkUI.ArkUI.Full。

1.1 RowSplit 组件功能简介

RowSplit 组件的主要功能是将子组件进行横向布局，并在每个子组件之间插入一根纵向的分割线。它通过分割线来限制子组件的宽度，初始化时，分割线的位置会根据子组件的宽度来计算。一旦初始化完成，后续动态修改子组件的宽度将不会生效，分割线的位置会保持不变，但用户可以通过拖动相邻的分割线来改变子组件的宽度。不过需要注意的是，在初始化后，如果动态修改 margin、border、padding 这些通用属性，导致子组件的宽度大于相邻分割线的间距，此时将不支持通过拖动分割线来改变子组件的宽度。

二、RowSplit 组件的接口与属性

2.1 接口

RowSplit 组件的接口非常简单，仅需使用 RowSplit() 即可创建一个 RowSplit 布局容器。示例代码如下：

RowSplit() {    // 这里可以添加子组件}

复制代码

2.2 属性

RowSplit 组件支持的主要属性是 resizeable，用于设置分割线是否可拖拽。

2.2.1 `resizeable` 属性

参数说明：该属性接受一个布尔类型的参数 value，表示分割线是否可拖拽，此参数为必填项，默认值为 false。
使用示例：

RowSplit() {    // 子组件}.resizeable(true) // 设置分割线可拖拽

复制代码

2.3 通用属性

RowSplit 组件还支持一些通用属性，如 clip、margin 等。其中，clip 属性在不设置时默认值为 true。例如：

RowSplit() {    // 子组件}.resizeable(true).margin({ top: 10, bottom: 10 }) // 设置上下外边距.clip(false) // 关闭裁剪

复制代码

三、RowSplit 组件的使用示例

3.1 基本用法示例

以下是一个基本的 RowSplit 组件使用示例，设置了可拖动的横向布局子组件：

// xxx.ets@Entry@Componentstruct RowSplitExample {    build() {        Column() {            Text('拖动分割线调整宽度').fontSize(12).fontColor(0x888888).width('90%')            RowSplit() {                Text('区域 1').width('15%').height(120).backgroundColor(0xFFE4B5).textAlign(TextAlign.Center)                Text('区域 2').width('15%').height(120).backgroundColor(0xBC8F8F).textAlign(TextAlign.Center)                Text('区域 3').width('15%').height(120).backgroundColor(0xFFE4B5).textAlign(TextAlign.Center)                Text('区域 4').width('15%').height(120).backgroundColor(0xBC8F8F).textAlign(TextAlign.Center)                Text('区域 5').width('15%').height(120).backgroundColor(0xFFE4B5).textAlign(TextAlign.Center)            }           .resizeable(true) // 可拖动           .width('90%').height(120)        }.width('100%').margin({ top: 15 })    }}

复制代码

代码解释：

首先创建了一个 Column 容器，用于垂直排列内容。
在 Column 中添加了一个 Text 组件，用于提示用户可以拖动分割线调整宽度。
接着创建了一个 RowSplit 组件，在其中添加了 5 个 Text 子组件，每个子组件设置了不同的背景颜色，方便区分。
通过 resizeable(true) 方法将分割线设置为可拖拽状态。
最后设置了 RowSplit 组件的宽度和高度，以及 Column 组件的外边距。

3.2 更多样式和交互示例

我们可以进一步扩展上述示例，添加更多的样式和交互效果。例如，为子组件添加边框、改变字体颜色等：

// xxx.ets@Entry@Componentstruct EnhancedRowSplitExample {    build() {        Column() {            Text('灵活调整区域宽度').fontSize(14).fontColor(0x666666).width('90%')            RowSplit() {                Text('模块 A').width('20%').height(150)                   .backgroundColor(0xFFDAB9)                   .textAlign(TextAlign.Center)                   .fontSize(16)                   .fontColor(0x333333)                   .border({ width: 2, color: 0x8B4513 })                Text('模块 B').width('20%').height(150)                   .backgroundColor(0xD2691E)                   .textAlign(TextAlign.Center)                   .fontSize(16)                   .fontColor(0xFFFFFF)                   .border({ width: 2, color: 0xFFE4C4 })                Text('模块 C').width('20%').height(150)                   .backgroundColor(0xFFDAB9)                   .textAlign(TextAlign.Center)                   .fontSize(16)                   .fontColor(0x333333)                   .border({ width: 2, color: 0x8B4513 })                Text('模块 D').width('20%').height(150)                   .backgroundColor(0xD2691E)                   .textAlign(TextAlign.Center)                   .fontSize(16)                   .fontColor(0xFFFFFF)                   .border({ width: 2, color: 0xFFE4C4 })                Text('模块 E').width('20%').height(150)                   .backgroundColor(0xFFDAB9)                   .textAlign(TextAlign.Center)                   .fontSize(16)                   .fontColor(0x333333)                   .border({ width: 2, color: 0x8B4513 })            }           .resizeable(true)           .width('90%').height(150)           .margin({ top: 20 })           .clip(false)        }.width('100%').margin({ top: 20 })    }}

复制代码

代码解释：

同样使用 Column 容器来垂直排列内容，添加提示文本。
在 RowSplit 组件中，为每个 Text 子组件添加了边框、调整了字体大小和颜色，使界面更加美观。
再次设置 resizeable(true) 确保分割线可拖拽。
增加了 margin 和 clip 属性，进一步调整布局和裁剪效果。

四、总结与注意事项

4.1 总结

RowSplit 组件为 ArkTS 开发者提供了一种简单而有效的方式来实现灵活的横向布局，用户可以通过拖动分割线来动态调整子组件的宽度，增强了界面的交互性和用户体验。通过合理运用 RowSplit 组件的接口和属性，结合通用属性的设置，开发者可以创建出各种复杂而美观的界面布局。

4.2 注意事项

初始化后宽度修改：初始化后动态修改子组件的宽度不会影响分割线的位置，若需要调整宽度，应通过拖动分割线来实现。
通用属性影响：初始化后，动态修改 margin、border、padding 等通用属性，导致子组件宽度大于相邻分割线间距时，将无法通过拖动分割线改变子组件宽度。
最大最小宽度限制：子组件可改变宽度的范围取决于其最大最小宽度，在设计时需要合理设置这些属性。

最后如果这篇文章对你有帮助，希望您能关注，点赞，加收藏哦～～～～

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/5b181dc6b969b14ffe43ea70a】。文章转载请联系作者。

李游Leo

关注

全栈开发工程师、全栈讲师、华为HDE 2022-07-14 加入

原百度、时趣互动、乐视高级前端（软件）开发工程师。后在北京一所当地大学任教，主要职务是教学主任，也为网易云课堂微专业的前端课程负责人。

发布

暂无评论

创作场景

HarmonyOS：ArkTS RowSplit 组件自学指南

一、ArkTS 应用框架与 RowSplit 组件概述

1.1 RowSplit 组件功能简介

二、RowSplit 组件的接口与属性

2.1 接口

2.2 属性

2.2.1 ​​resizeable​​ 属性

2.3 通用属性

三、RowSplit 组件的使用示例

3.1 基本用法示例

代码解释：

3.2 更多样式和交互示例

代码解释：

四、总结与注意事项

4.1 总结

4.2 注意事项

李游Leo

评论

2.2.1 `resizeable` 属性