手把手教你写用 ArkTS 完成 HarmonyOS 实战项目编写 —— 支付宝页面仿写

源代码地址：https://gitee.com/CodingGorit/harmony-os-projects/tree/layout/layout/alipay

知识储备

1. TS 基础
2. ArkTS 掌握常用控件 和 Row、Column 布局 即可
3. DevEco 开发工具的基本使用【如果之前用过 IDEA 等相关开发工具，相信上手会很快】
4. 建议学完了官方提供的学习路线，再来看就会简单很多~

运行效果预览

支付宝效果图

鸿蒙原生 ArkTS 开发 及 模拟器实际效果如下

如何实现这个布局？

我们可以画图拆解一下这个布局组成

整体上看，我们可以使用 Column + Row + Grid 布局完成这个小 demo

因此我在仿写的过程中，将其分别抽离为了两个组件

• Header
• GridContent

最终的项目目录结构如下

鉴于篇幅原因，这里仅提供核心实现代码，具体源代码我已经放到了代码仓库里了，大家可以自行查阅

实现 Header 组件的核心代码

import CommonConstants from '../../common/CommonConstant'

@Component
export default struct Header {

  @Builder HeaderGroupItem(image: Resource, text: string) {
    Column() {
      Image(image)
        .width(32)
        .height(32)
        .objectFit(ImageFit.Auto)
        .margin({ bottom: 10 })
      Text(text)
        .fontColor(Color.White)
        .fontSize(14)
        .fontWeight(FontWeight.Medium)
    }
  }

  build() {
    Column() {
      Row() {
        Column() {
          Row() {
            Text("上海")
              .fontSize(16)
              .textAlign(TextAlign.Start)
              .fontColor($r("app.color.header_text_color"))
              .fontWeight(FontWeight.Bold)
            Button({ stateEffect: true}) {
              Row() {
                Image($r("app.media.arrowDown"))
                  .width(16)
                  .height(16)
                  .objectFit(ImageFit.Fill)
              }
            }
            .backgroundColor(Color.Transparent)
            .width(32)
            .height(32)
            .fontColor(Color.White)
          }.justifyContent(FlexAlign.SpaceBetween)
          Text("多云 20℃")
            .fontSize(12)
            .fontColor($r("app.color.header_text_color"))
            .textAlign(TextAlign.Start)
            .fontWeight(FontWeight.Normal)
            .opacity(0.7)
        }.alignItems(HorizontalAlign.Start)

        TextInput({ placeholder: "🔍缴纳电费"})
          .placeholderColor($r("app.color.search_bar_placeholder_color"))
          .height(35)
          .width("70%")
          .backgroundColor($r("app.color.search_bar_background"))
          .style(TextInputStyle.Inline)
          .borderRadius(10)
        Button({
          stateEffect: true
        }) {
          Row() {
            Image($r("app.media.plusCircle"))
              .width(24)
              .height(24)
          }}.margin({ left: 10})
      }.justifyContent(FlexAlign.SpaceAround)
      .margin({ bottom: 20 })

      Row() {
        this.HeaderGroupItem($r("app.media.scan"), "扫一扫")
        this.HeaderGroupItem($r("app.media.payment"), "付款/收款")
        this.HeaderGroupItem($r("app.media.navi"), "出行")
        this.HeaderGroupItem($r("app.media.package"), "卡包")
      }.width("100%")
      .justifyContent(FlexAlign.SpaceEvenly)
    }
    .padding({
      top: 20,
      left: 10,
      right: 10
    })

  }

}

实现 GridContent 组件

import CommonConstants from '../../common/CommonConstant'
import { getGridContentData } from '../viewmodel/GridContentData';
import GridContentItem from '../viewmodel/GridContentItem'

@Component
export default struct GridContent {

  private gridContentList: GridContentItem[] = [];

  aboutToAppear() {
    this.gridContentList = getGridContentData();
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.gridContentList, (item: GridContentItem) => {
          GridItem() {
            Column() {
              Image(item.icon)
                .width(32)
                .height(32)
                .objectFit(ImageFit.Fill)
                .margin({
                  bottom: 5
                })
              Text(item.text)
                .fontSize(14)
                .fontWeight(FontWeight.Medium)
            }

          }
        }, (item: GridContentItem) => JSON.stringify(item));
      }.rowsTemplate("1fr 1fr 1fr")
      .columnsTemplate("1fr 1fr 1fr 1fr 1fr")
      .rowsGap(15)
      .columnsGap(15)
    }.borderRadius({
      topLeft: 10,
      topRight: 10
    })
    .height(200)
    .width(CommonConstants.FULL_PARENT)
    .backgroundColor($r("app.color.alipay_main_background"))
    .margin({
      top: 15
    }).padding({
      top: 15,
      left: 10,
      right: 10
    })

  }
}

总结

这里其实是比较简单的页面编写，只要老老实实跟着官方教程走，大家基本都可以独立编写项目！！！