[HarmonyOS NEXT 实战案例:分割布局] 进阶篇 - RowSplit与ColumnSplit的组合应用
[HarmonyOS NEXT 实战案例:分割布局] 进阶篇 - RowSplit与ColumnSplit的组合应用
项目已开源,开源地址: https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial , 欢迎fork & star
效果演示
引言
在前面的教程中,我们分别学习了HarmonyOS NEXT中的水平分割布局RowSplit
和垂直分割布局ColumnSplit
的基本用法。在实际应用开发中,为了构建更复杂的界面结构,我们常常需要将这两种分割布局组件组合使用。本教程将深入探讨RowSplit
与ColumnSplit
的组合应用,帮助你掌握更高级的布局技巧。
分割布局的组合策略
在组合使用RowSplit
和ColumnSplit
时,我们通常采用以下几种策略:
- 嵌套使用:在一个分割布局的子区域内嵌套另一个分割布局
- 混合使用:在同一个界面中同时使用两种分割布局,但不嵌套
- 动态切换:根据用户交互或数据变化,动态切换不同的分割布局
本教程将重点讲解嵌套使用的策略,这是最常见也是最强大的组合方式。
案例分析:设置中心界面
让我们通过一个设置中心界面的案例,来学习RowSplit
与ColumnSplit
的组合应用:
@Component
export struct SettingsCenter {
@State selectedMenu: string = '账户'
build() {
RowSplit() {
// 左侧菜单 (40%)
Column() {
Text('设置中心').fontSize(20).margin({ top: 20, bottom: 30 })
ForEach(['账户', '通知', '隐私', '显示', '存储', '关于'], (item:string) => {
Button(item)
.width('90%')
.stateEffect(this.selectedMenu === item)
.margin({ bottom: 12 })
.onClick(() => { this.selectedMenu = item })
})
}.width('40%').backgroundColor('#f5f5f5')
// 右侧内容区 (60%)
ColumnSplit() {
// 标题区
Text(this.selectedMenu + '设置')
.fontSize(24)
.margin({ top: 20, bottom: 20 })
// 内容区(根据选择动态变化)
if (this.selectedMenu === '账户') {
this.buildAccountSettings()
} else if (this.selectedMenu === '通知') {
this.buildNotificationSettings()
}
// 底部操作按钮
Button('保存设置')
.width('90%')
.margin(20)
}.width('60%')
}
}
// 账户设置构建函数
@Builder
private buildAccountSettings() {
// 账户设置内容
}
// 通知设置构建函数
@Builder
private buildNotificationSettings() {
// 通知设置内容
}
}
在这个案例中,我们使用了RowSplit
和ColumnSplit
的嵌套组合:
- 最外层使用
RowSplit
将界面分为左右两部分:左侧菜单区和右侧内容区 - 在右侧内容区内,使用
ColumnSplit
将其进一步分为上中下三部分:标题区、内容区和底部操作区
这种嵌套组合的方式,使得我们可以构建出复杂的多区域布局结构。
代码详解
外层RowSplit
首先,我们使用RowSplit
组件将界面分为左右两部分:
RowSplit() {
// 左侧菜单 (40%)
Column() {
// 菜单内容
}.width('40%').backgroundColor('#f5f5f5')
// 右侧内容区 (60%)
ColumnSplit() {
// 内容区内容
}.width('60%')
}
在这个RowSplit
中:
- 左侧区域是一个
Column
组件,宽度为40%,背景色为浅灰色,用于显示菜单项 - 右侧区域是一个
ColumnSplit
组件,宽度为60%,用于显示内容
左侧菜单区
左侧菜单区使用Column
组件垂直排列内容:
Column() {
Text('设置中心').fontSize(20).margin({ top: 20, bottom: 30 })
ForEach(['账户', '通知', '隐私', '显示', '存储', '关于'], (item:string) => {
Button(item)
.width('90%')
.stateEffect(this.selectedMenu === item)
.margin({ bottom: 12 })
.onClick(() => { this.selectedMenu = item })
})
}.width('40%').backgroundColor('#f5f5f5')
在这个Column
中:
- 首先是一个标题文本"设置中心",设置了字体大小和上下边距
- 然后使用
ForEach
循环遍历一个字符串数组,为每个菜单项创建一个按钮 - 每个按钮都设置了宽度、状态效果、边距和点击事件处理函数
内层ColumnSplit
右侧内容区使用ColumnSplit
组件将其分为上中下三部分:
ColumnSplit() {
// 标题区
Text(this.selectedMenu + '设置')
.fontSize(24)
.margin({ top: 20, bottom: 20 })
// 内容区(根据选择动态变化)
if (this.selectedMenu === '账户') {
this.buildAccountSettings()
} else if (this.selectedMenu === '通知') {
this.buildNotificationSettings()
}
// 底部操作按钮
Button('保存设置')
.width('90%')
.margin(20)
}.width('60%')
在这个ColumnSplit
中:
- 顶部是标题区,显示当前选中的菜单项名称加上"设置"后缀
- 中间是内容区,根据当前选中的菜单项动态显示不同的内容
- 底部是操作区,包含一个"保存设置"按钮
动态内容切换
在内容区,我们根据当前选中的菜单项动态切换显示不同的内容:
if (this.selectedMenu === '账户') {
this.buildAccountSettings()
} else if (this.selectedMenu === '通知') {
this.buildNotificationSettings()
}
这里使用条件语句根据selectedMenu
的值来决定调用哪个@Builder
方法。当用户点击左侧菜单中的不同按钮时,selectedMenu
的值会发生变化,从而触发内容区的更新。
分割布局的嵌套层次
在组合使用RowSplit
和ColumnSplit
时,我们需要注意嵌套的层次结构。在我们的案例中,嵌套层次如下:
- 第一层:
RowSplit
(水平分割)- 左侧区域:
Column
- 右侧区域:
ColumnSplit
(垂直分割)- 顶部区域:
Text
- 中间区域:条件内容
- 底部区域:
Button
- 顶部区域:
- 左侧区域:
这种层次结构使得我们可以精确控制界面的每个部分,实现复杂的布局需求。
分割比例的设计原则
在设计分割布局的比例时,我们需要遵循一些原则:
- 黄金分割:使用接近黄金分割比(约为0.618:0.382)的比例,可以创造出视觉上和谐的布局
- 功能重要性:根据各区域功能的重要性分配空间,重要的功能区域应该分配更多的空间
- 内容密度:根据各区域内容的密度分配空间,内容密度高的区域应该分配更多的空间
- 用户关注点:根据用户的关注点分配空间,用户更关注的区域应该分配更多的空间
在我们的案例中,左侧菜单区和右侧内容区的比例为40%:60%,这是一个接近黄金分割的比例,同时也考虑了右侧内容区需要显示更多信息的需求。
响应式布局的实现
在实际应用中,我们常常需要根据屏幕大小调整分割布局的比例,以适应不同的设备。HarmonyOS提供了媒体查询功能,可以帮助我们实现响应式布局。
以下是一个简化的响应式布局示例:
@Component
export struct ResponsiveSettingsCenter {
@State selectedMenu: string = '账户'
@State isWideScreen: boolean = true
aboutToAppear() {
// 根据屏幕宽度判断是否为宽屏
this.isWideScreen = AppStorage.Get<number>('screenWidth') >= 600
}
build() {
if (this.isWideScreen) {
// 宽屏布局:使用RowSplit
RowSplit() {
// 左侧菜单
// 右侧内容
}
} else {
// 窄屏布局:使用ColumnSplit
ColumnSplit() {
// 顶部菜单
// 底部内容
}
}
}
}
在这个示例中,我们根据屏幕宽度动态选择使用RowSplit
(宽屏)或ColumnSplit
(窄屏)布局,从而适应不同的设备。
分割布局与其他布局组件的组合
除了RowSplit
和ColumnSplit
的组合,我们还可以将分割布局与其他布局组件组合使用,如Flex
、Grid
、List
等,构建更加复杂和灵活的界面结构。
以下是一些常见的组合方式:
- 分割布局 + Flex布局:在分割布局的某个区域内使用Flex布局(
Row
或Column
),实现更灵活的内容排列 - 分割布局 + Grid布局:在分割布局的某个区域内使用Grid布局,实现网格式的内容展示
- 分割布局 + List布局:在分割布局的某个区域内使用List布局,实现列表式的内容展示
在我们的案例中,我们在RowSplit
的左侧区域使用了Column
组件,在右侧ColumnSplit
的内容区使用了条件渲染的@Builder
方法,这些都是分割布局与其他布局组件的组合应用。
小结
在本教程中,我们深入探讨了HarmonyOS NEXT中RowSplit
与ColumnSplit
的组合应用。通过一个设置中心界面的案例,我们学习了如何使用嵌套的分割布局构建复杂的界面结构,以及如何实现动态内容切换。
组合使用RowSplit
和ColumnSplit
可以帮助我们构建出更加复杂和灵活的界面布局,满足各种应用场景的需求。在实际应用开发中,你可以根据自己的需求选择适当的组合方式,设计出符合你应用风格的界面布局。
- 0回答
- 4粉丝
- 0关注
- [HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 垂直分割布局ColumnSplit详解
- [HarmonyOS NEXT 实战案例:分割布局] 进阶篇 - 交互式邮件应用布局
- [HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 水平分割布局RowSplit详解
- [HarmonyOS NEXT 实战案例:分割布局] 进阶篇 - 三栏布局的嵌套与复杂界面构建
- [HarmonyOS NEXT 实战案例:分割布局] 进阶篇 - 设置中心的动态内容与复用构建
- [HarmonyOS NEXT 实战案例十八] 日历日程视图网格布局(进阶篇)
- [HarmonyOS NEXT 实战案例一:SideBarContainer] 侧边栏容器实战:新闻阅读应用侧边栏布局 进阶篇
- [HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 邮件应用布局设计
- [HarmonyOS NEXT 实战案例:聊天应用] 进阶篇 - 交互功能与状态管理
- [HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 可调整分割比例的垂直布局
- [HarmonyOS NEXT 实战案例十五] 电商分类导航网格布局(进阶篇)
- [HarmonyOS NEXT 实战案例:电商应用] 进阶篇 - 交互功能与状态管理
- [HarmonyOS NEXT 实战案例:新闻阅读应用] 进阶篇 - 交互功能与状态管理
- [HarmonyOS NEXT 实战案例:电商应用] 进阶篇 - 交互功能与状态管理
- 94.[HarmonyOS NEXT 实战案例:分割布局] 基础篇 - 三栏垂直分割布局