HarmonyOS NEXT 原生应用开发：社交通讯发现界面实现

import { Column, Row, Image, Text, Navigator } from '@ohos.arkui';
 
@Entry
@Component
struct DiscoveryPage {
  @State modules: Array<{ icon: string; title: string; description: string; uri: string }> = [
    { icon: '$media:friendCircle', title: '朋友圈', description: '分享生活点滴', uri: '' },
    { icon: '$media:scan', title: '扫一扫', description: '扫描二维码/条码', uri: '' },
    { icon: '$media:shake', title: '摇一摇', description: '发现附近的人', uri: '' },
    // ...更多功能模块
  ];
 
  build() {
    Column() {
      this.modules.map((module) => {
        Row({ verticalAlign: VerticalAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
          Column({ verticalAlign: VerticalAlign.Center }) {
            Image(module.icon).width('60vp').height('60vp')
            Text(module.title).fontSize('18vp').margin({ top: '8vp' })
            Text(module.description).fontSize('14vp').color(Color.Gray).margin({ top: '4vp' })
          }
          // 实际应用中，应实现Navigator跳转到对应页面
          // 由于本示例为静态展示，故注释掉以下代码
          // Navigator({ uri: module.uri }).onClick(() => {})
          // 替代为显示一个不可点击的占位符
          Text('→').fontSize('18vp').color(Color.Gray).opacity(0.5)
        }
        .width('100%')
        .margin({ bottom: '24vp' })
      })
    }
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.