HarmonyOS鸿蒙NEXT中首页HomePage界面布局结构分析
HarmonyOS鸿蒙NEXT中首页HomePage界面布局结构分析 关键容器组件：Scroll、Swiper、Grid、List。
从上至下、外向内的容器层级分别是：
红色：上下滚动组件scroll
黄色：列组件column
蓝色：轮播组件swiper
绿色：表格组件grid
黑色：列表组件list
红色：列表项组件listitem+层叠组件stack
如下图所示：
| 
| 
|
- 农民叔叔标题
// 标题
Text('农民叔叔')
.fontWeight(FontWeight.Medium)
.fontSize(24)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.margin({top:12,left:12})
.alignSelf(ItemAlign.Start)
- 轮播图
// 轮播图
Swiper(){
Image($r('app.media.icon_second_card'))
.borderRadius(16)
.syncLoad(true)
}
.autoPlay(true)
.width('95%')
.margin(12)
.displayCount(1)
- 相机/相册
// 表格布局：相机、相册
Grid(){
GridItem(){
// 相机
Column(){
Image($r('app.media.icon_camera'))
.width(64)
.height(64)
.syncLoad(true)
Text('打开摄像头拍摄')
.fontSize(12)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.margin({top:4})
}
.onClick(() => {
// 拉取手机摄像头
// TODO:
})
}
GridItem(){
// 相册
Column(){
Image($r('app.media.icon_photo'))
.width(64)
.height(64)
.syncLoad(true)
Text('从相册选择')
.fontSize(12)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.margin({top:4})
}
.onClick(() => {
// 打开手机相册
// TODO:
})
}
}
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr')
.borderRadius(24)
.backgroundColor($r('sys.color.ohos_id_color_card_bg'))
.margin(12)
.padding({top:12,bottom:12})
.width('95%')
.height('17%')
- 病虫害图集
// 病虫害图片集列表
Column(){
Text('病虫害图集')
.fontSize(16)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.alignSelf(ItemAlign.Start)
.margin({left:12,top:12})
List(){
ListItem(){
Stack({alignContent:Alignment.TopStart}){
// 背景图
Image($r('app.media.p_putao_heidou'))
.objectFit(ImageFit.Cover)
.aspectRatio(1.32)
.syncLoad(true)
.borderRadius(12)
Column(){
// 农作物品名
Text('葡萄')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.alignSelf(ItemAlign.Start)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
// 病虫害名称
Text('黑豆病')
.fontSize(12)
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.margin({top:4})
}
.margin({left:8,top:8})
.backgroundColor($r('sys.color.ohos_id_color_card_bg'))
.borderRadius(8)
.padding(4)
}
.margin({right:6,top:12})
.borderRadius(12)
.onClick(() => {
// TODO:跳转病害详情页面
})
}
}
.width('95%')
.margin({left:12,top:6,right:6,bottom:12})
.lanes(2)
}
- 首页build()完整代码
build() {
Scroll(){
Column(){
// 标题
Text('农民叔叔')
.fontWeight(FontWeight.Medium)
.fontSize(24)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.margin({top:12,left:12})
.alignSelf(ItemAlign.Start)
// 轮播图
Swiper(){
Image($r('app.media.icon_second_card'))
.borderRadius(16)
.syncLoad(true)
}
.autoPlay(true)
.width('95%')
.margin(12)
.displayCount(1)
// 表格布局：相机、相册
Grid(){
GridItem(){
// 相机
Column(){
Image($r('app.media.icon_camera'))
.width(64)
.height(64)
.syncLoad(true)
Text('打开摄像头拍摄')
.fontSize(12)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.margin({top:4})
}
.onClick(() => {
// 拉取手机摄像头
// TODO:
})
}
GridItem(){
// 相册
Column(){
Image($r('app.media.icon_photo'))
.width(64)
.height(64)
.syncLoad(true)
Text('从相册选择')
.fontSize(12)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.margin({top:4})
}
.onClick(() => {
// 打开手机相册
// TODO:
})
}
}
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr')
.borderRadius(24)
.backgroundColor($r('sys.color.ohos_id_color_card_bg'))
.margin(12)
.padding({top:12,bottom:12})
.width('95%')
.height('17%')
// 病虫害图片集列表
Column(){
Text('病虫害图集')
.fontSize(16)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontWeight(FontWeight.Medium)
.alignSelf(ItemAlign.Start)
.margin({left:12,top:12})
List(){
ListItem(){
Stack({alignContent:Alignment.TopStart}){
// 背景图
Image($r('app.media.p_putao_heidou'))
.objectFit(ImageFit.Cover)
.aspectRatio(1.32)
.syncLoad(true)
.borderRadius(12)
Column(){
// 农作物品名
Text('葡萄')
.fontSize(16)
.fontWeight(FontWeight.Medium)
.alignSelf(ItemAlign.Start)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
// 病虫害名称
Text('黑豆病')
.fontSize(12)
.fontColor($r('sys.color.ohos_id_color_text_secondary'))
.margin({top:4})
}
.margin({left:8,top:8})
.backgroundColor($r('sys.color.ohos_id_color_card_bg'))
.borderRadius(8)
.padding(4)
}
.margin({right:6,top:12})
.borderRadius(12)
.onClick(() => {
// TODO:跳转病害详情页面
})
}
}
.width('95%')
.margin({left:12,top:6,right:6,bottom:12})
.lanes(2)
}
}
.width('100%')
.backgroundColor($r('sys.color.ohos_id_color_sub_background'))
}
.scrollBar(BarState.Off)
}
下一篇：优化ListItem，避免重复代码，需自定义组件PestListView。
更多关于HarmonyOS鸿蒙NEXT中首页HomePage界面布局结构分析的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
HarmonyOS NEXT的HomePage采用FA（Feature Ability）作为界面载体，使用ArkUI框架构建。主要结构分为三部分：顶部为状态栏区，显示设备状态信息；中间为内容展示区，采用多列网格布局或列表布局展示应用图标；底部为Dock栏，固定显示常用应用。布局实现基于ArkUI的Column、Row、Stack组件组合，通过@Entry装饰器声明入口组件。页面生命周期包含onPageShow/onPageHide回调，支持动态加载能力。视觉层级采用Z轴分层设计，背景层、内容层、浮层相互独立。
更多关于HarmonyOS鸿蒙NEXT中首页HomePage界面布局结构分析的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
从代码和结构图来看，这个首页布局采用了典型的HarmonyOS ArkUI声明式开发范式，主要特点如下：
-
整体采用Scroll+Column的纵向滚动布局，这是HarmonyOS中处理长列表页面的标准做法。
-
组件层级清晰：
- 最外层Scroll实现整体页面滚动。
- 内层Column作为主容器。
- 各功能区块使用Swiper/Grid/List等专用组件。
-
关键组件使用规范：
- Swiper实现自动轮播，配置了displayCount控制显示数量。
- Grid采用1fr 1fr的等分布局。
- List使用lanes(2)实现网格布局。
- Stack实现图片文字叠加效果。
-
样式处理：
- 使用系统资源($r)管理颜色。
- 采用标准的margin/padding间距体系。
- 注意了圆角(borderRadius)的一致性。
-
交互方面：
- 为可点击元素添加了onClick事件。
- 图片加载使用syncLoad优化体验。
这个实现符合HarmonyOS的UI开发规范，各组件使用方式正确。后续可以像注释提到的，将ListItem抽离为自定义组件PestListView来优化代码结构。
