HarmonyOS:ArkTS RowSplit 组件自学指南

在日常的 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​​ 布局容器。示例代码如下:

scss 复制代码
RowSplit() {
    // 这里可以添加子组件
}

2.2 属性

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

2.2.1 ​​resizeable​​ 属性

  • 参数说明 :该属性接受一个布尔类型的参数 ​value​,表示分割线是否可拖拽,此参数为必填项,默认值为 ​false​
  • 使用示例
scss 复制代码
RowSplit() {
    // 子组件
}
.resizeable(true) // 设置分割线可拖拽

2.3 通用属性

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

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

三、RowSplit 组件的使用示例

3.1 基本用法示例

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

scss 复制代码
// xxx.ets
@Entry
@Component
struct 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 更多样式和交互示例

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

scss 复制代码
// xxx.ets
@Entry
@Component
struct 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​ 等通用属性,导致子组件宽度大于相邻分割线间距时,将无法通过拖动分割线改变子组件宽度。
  • 最大最小宽度限制:子组件可改变宽度的范围取决于其最大最小宽度,在设计时需要合理设置这些属性。

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

相关推荐
鸿蒙布道师8 小时前
鸿蒙NEXT开发Base64工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
The 旺9 小时前
《HarmonyOS Next开发实战:从零构建响应式Todo应用的基石》
华为·harmonyos
Industio_触觉智能10 小时前
鸿蒙北向开发OpenHarmony5.0 DevEco Studio开发工具安装与配置
harmonyos·鸿蒙系统·openharmony·开源鸿蒙·鸿蒙开发·嵌入式开发板
秋叶先生_14 小时前
HarmonyOS NEXT——【鸿蒙监听网络状态变化】
华为·harmonyos·鸿蒙
东林知识库15 小时前
鸿蒙NEXT小游戏开发:围住神经猫
harmonyos
zacksleo15 小时前
鸿蒙Flutter开发故事:不,你不需要鸿蒙化
flutter·harmonyos
别说我什么都不会17 小时前
OpenHarmony解读之设备认证:sts协议-客户端发起sts end请求
物联网·嵌入式·harmonyos
悬空八只脚20 小时前
React-Native开发鸿蒙NEXT-本地与沙盒加载bundle
harmonyos
鸿蒙布道师20 小时前
鸿蒙NEXT开发日志工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
90后的晨仔20 小时前
HarmonyOS的页面生命周期 和 组件生命周期
harmonyos