手把手教你写用 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: "
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/757288