3. 功能列表展示
使用 List
和 ForEach
组件展示功能列表,每个列表项包含图标、名称和右侧箭头图标,点击列表项可实现页面跳转。代码如下:
Column() {
List() {
ForEach(totalinfo, (item: ListItem, index: number) => {
ListItem() {
Row() {
Image($r(item.iconUrl))
.width('16lpx')
.height('16lpx')
.margin({ top: '14lpx', bottom: '14lpx', right: '8lpx' })
Text(item.name)
.fontSize(14)
.lineHeight(20)
.fontColor('#000000')
.margin({ top: '12lpx', bottom: '12lpx' })
Image($r('app.media.right'))
.width('13lpx')
.height('13lpx')
.position({ top: '15.5lpx', bottom: '15.5lpx', right: '20.67lpx' })
if (index != 6) {
Divider()
.width('296lpx')
.position({ bottom: 0 })
}
}
// ... 布局样式设置
}
.backgroundColor(Color.White)
.onClick(() => {
if (item.name === PathName.ORDER) {
this.pageRouter.pushPathByName('OrderPage', null)
}
})
})
}
// ... 列表样式设置
}
4. 会员中心提示
在页面中展示会员中心提示信息,包括图标、名称、描述和前往按钮。代码如下:
RelativeContainer() {
Row() {
Image($r('app.media.vipicon'))
.width('20lpx')
.height('20lpx')
.margin({ right: '6lpx' })
Text('会员中心')
// ... 文本样式设置
}
// ... 布局规则设置
.margin({ left: '15lpx', top: '12lpx' })
.id('row1')
Row() {
Text('开通会员享受众多特权')
// ... 文本样式设置
}
.alignRules({
top: { anchor: "row1", align: VerticalAlign.Bottom },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.margin({ left: '16lpx', top: '6lpx' })
Row() {
Button('立即前往')
.width('80lpx')
.height('28lpx')
.fontSize(12)
.fontColor('#000000')
.backgroundColor('rgba(0, 0, 0, 0.05)')
.borderRadius(17)
}
// ... 布局规则设置
.margin({ top: '18lpx', right: '16lpx' })
}
// ... 容器样式设置
通过以上代码,开发者可以在HarmonyOS Next应用中实现一个完整的个人主页页面,包括页面布局、用户信息展示、功能列表展示和会员中心提示等功能。