Index.ets:
import router from '@ohos.router' class RouterInfo { // 页面路径 url: string // 页面标题 title: string constructor(url: string, title: string) { this.url = url this.title = title } } @Entry // 入口組件 @Component struct Index { @State message: string = '页面列表' // 路由列表数组 private routers: RouterInfo[] = [ // app Log: 路由失败, errorCode: 100002 errMsg:Uri error. The uri of router is not exist. // main_pages.json配置 new RouterInfo('pages/ImagePage', '图片查看案例'), new RouterInfo('pages/PropPage', '任务列表案例') ] build() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) .height(80) .onClick(() => { this.message = 'Hello ArkTS!'; }) List({ space: 15 }) { ForEach( this.routers, (router, index) => { ListItem() { this.RouterItem(router, index + 1) } } ) } .layoutWeight(1) .alignListItem(ListItemAlign.Center) .width('100%') } .width('100%') .height('100%') } @Builder RouterItem(r: RouterInfo, i: number) { Row() { Text(i + '.') .fontSize(20) .fontColor(Color.White) Blank() Text(r.title) .fontSize(20) .fontColor(Color.White) } .width('90%') .padding(12) .backgroundColor('#38f') .borderRadius(20) .shadow({radius: 6, color: '#4F000000', offsetX: 2, offsetY: 2}) .onClick(() => { // router跳转 router.pushUrl( { url: r.url, params: {id: i} }, router.RouterMode.Single, err => { if (err) { console.log(`路由失败, errorCode: ${err.code} errMsg:${err.message}`) } } ) }) } } /** * struct:自定义组件 可复用的UI单元 * 装饰器:用来装饰类结构、方法、变量 * @Component:标记自定义组件 * @Entry:标记当前组件是入口组件 * @State:标记一个变量是状态变量,值变化时会触发UI更新 * build():UI描述,其内部以声明式方式描述UI结构 * 内置组件:ArkUI提供的组件,比如容器组件如Row、Column * 基础组件:自带样式和功能的页面元素,如Text * 属性方法:设置组件的UI样式 * 事件方法:设置组件的事件回调 * 组件通用属性、特有属性(图片插值) */