Harmonyos5应用开发实战——个人主页页面构建(part2)

阅读 26

03-31 18:00

3. 功能列表展示

使用 ListForEach 组件展示功能列表,每个列表项包含图标、名称和右侧箭头图标,点击列表项可实现页面跳转。代码如下:

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应用中实现一个完整的个人主页页面,包括页面布局、用户信息展示、功能列表展示和会员中心提示等功能。

精彩评论(0)

0 0 举报