
回复
项目源码已开源(持续更新中~~): https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial
注意: 项目需要再真机或模拟器中运行, 否则会出现部分图片无法展示的问题
Index.ets
是HarmonyOS Next开发者手册应用的入口页面,它展示了应用的主要导航结构和用户界面设计。本文将深入分析这个文件的代码结构、UI组件使用以及路由实现,帮助开发者理解HarmonyOS应用的基本构建模式。
// 导入基础组件和路由
import {RouterType} from "../type/type"
import {pageRouter} from "../router/index"
import router from '@ohos.router';
这部分代码导入了三个关键模块:
RouterType
:自定义的路由类型接口,定义了路由项的数据结构pageRouter
:预定义的路由配置数据,包含应用的主要导航项router
:HarmonyOS提供的路由服务,用于页面跳转@Entry
@Component
struct IndexPage {
// 阶段分类数据
stageCategories: RouterType[] = pageRouter
build() {
// UI构建代码
}
}
@Entry
:标记此组件为页面入口@Component
:声明这是一个UI组件stageCategories
:组件的状态变量,类型为RouterType[]
,初始值为pageRouter
Stack() {
// 背景渐变
Column()
.width('100%')
.height('100%')
.backgroundColor('#F0F5FF') // 淡蓝色背景
.justifyContent(FlexAlign.Center)
// 主内容区
Column({ space: 30 }) {
// 标题和列表内容
}
.padding({ top: 30 })
.height('100%')
}
页面使用Stack
组件作为根容器,实现了层叠布局:
这种布局方式使得背景和内容可以独立控制,同时实现视觉上的层次感。
// 标题
Text('HarmonyOS Next 开发者手册')
.fontSize(32)
.fontWeight(700)
.foregroundColor('#005FF9') // 华为蓝主色
.margin({ top: 50 })
标题使用Text
组件,设置了:
这样的设计使标题醒目且符合品牌特性。
// 阶段分类列表
List() {
ForEach(this.stageCategories, (item: RouterType) => {
ListItem() {
// 列表项内容
}.margin({ bottom: 16 })
}, (item:RouterType) => item.stage)
}
.width('95%')
列表使用List
和ForEach
组合实现:
List
:提供列表容器ForEach
:遍历stageCategories
数组,为每个项创建一个ListItem
(item:RouterType) => item.stage
:提供唯一键值,优化渲染性能Row({ space: 20 }) {
// 阶段图标
Image(item.icon)
.width(60)
.height(60)
.objectFit(ImageFit.Contain)
// 阶段信息
Column({ space: 8 }) {
Text(item.stage)
.fontSize(20)
.fontWeight(500)
Text(item.desc)
.fontSize(14)
.foregroundColor('#666')
}.width('50%')
// 导航按钮
Button('进入')
.width(80)
.height(35)
.backgroundColor('#005FF9')
.foregroundColor('white')
.borderRadius(18)
.onClick(() => {
router.pushUrl({ url: item.routePath });
})
}
.padding({ left: 24, right: 24, top: 16, bottom: 16 })
.backgroundColor('white')
.borderRadius(16)
.justifyContent(FlexAlign.SpaceBetween)
每个列表项使用Row
布局,包含三个部分:
Image
组件显示阶段图标Column
包含两个Text
,分别显示阶段名称和描述Button
组件,点击时调用router.pushUrl
进行页面跳转列表项的样式设计包括:
justifyContent(FlexAlign.SpaceBetween)
实现)// 来自type.ets
export interface RouterType{
stage: string; // 阶段名称
desc: string; // 阶段描述
icon: string; // 阶段图标
routePath: string; // 二级页面路由路径
}
RouterType
接口定义了每个导航项需要的数据:
stage
:阶段名称,如"萌新小白"desc
:阶段描述,如"掌握HarmonyOS基础"icon
:图标资源路径routePath
:目标页面的路由路径// 来自router/index.ets
export const pageRouter:RouterType[] = [
{
"stage": "萌新小白",
"desc": "掌握HarmonyOS基础",
"icon": "common/assect/icon_basic.png",
"routePath": "pages/secondPage/BasicCaseList"
},
{
"stage": "登堂入室",
"desc": "深入学习HarmonyOS ",
"icon": "common/assect/icon_advanced.png",
"routePath": "pages/secondPage/AdvancedCaseList"
},
{
"stage": "进阶高手",
"desc": "精通HarmonyOS的高级功能开发 ",
"icon": "common/assect/icon_hybrid.png",
"routePath": "pages/secondPage/HybridCaseList"
}
]
pageRouter
数组包含三个导航项,分别对应三个学习阶段,每个阶段都有对应的图标和目标页面。
Button('进入')
// 样式属性...
.onClick(() => {
router.pushUrl({ url: item.routePath });
})
路由跳转通过router.pushUrl
方法实现,传入目标页面的URL。这种方式会将当前页面保留在导航栈中,用户可以通过返回按钮回到首页。
Index页面展示了HarmonyOS的组件化开发思想:
@Component
创建可复用的UI组件ArkTS的声明式UI使代码更加直观:
.onClick()
等方法直接绑定代码展示了良好的关注点分离:
本项目主要通过主页面来层层递进,初版设计的比较low, 后面有机会在优化吧~~