源代码地址:https://gitee.com/CodingGorit/harmony-os-projects/tree/layout/layout/alipay
知识储备
- TS 基础
- ArkTS 掌握常用控件 和 Row、Column 布局 即可
- DevEco 开发工具的基本使用【如果之前用过 IDEA 等相关开发工具,相信上手会很快】
- 建议学完了官方提供的学习路线,再来看就会简单很多~
运行效果预览
支付宝效果图
鸿蒙原生 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
})
}
}
总结
这里其实是比较简单的页面编写,只要老老实实跟着官方教程走,大家基本都可以独立编写项目!!!