如何开发一个OpenHarmony购物app导航页面
购物类App是现在最常用的一类App,也是我们在应用开发中经常遇到的场景。一款购物App界面通常包括了扫一扫功能、搜索框、轮播图、标签页、商品列表等功能,我们以橘子购物为例,介绍一下如何使用ArkTS开发一个购物类App。首先我们可以看一下最终实现效果:
如上图所示,首先最外层是一个可以切换切换的标签页,分别对应首页、新品、购物车以及我的等四个栏目。页面整体结构可以通过Tabs组件实现,通过阅读Tabs组件的API文档,注意到Tabs包含子组件TabContent即可实现选项卡效果。我们可以快速构造出如下所示的整体结构:
private controller: TabsController = new TabsController()
Column() {
Tabs({
barPosition: BarPosition.END,
controller: this.controller
}) {
TabContent() {
}
TabContent() {
}
TabContent() {
}
TabContent() {
}
}
}.width('100%')
其中barPosition控制选择栏位置,BarPosition.END表示选择栏在页面下方,BarPosition.START表示选择栏在页面上方,同时定义一个TabsController来控制Tabs切换逻辑。图中选择栏各个栏目都有相同的结构,都是图片加标题,这部分样式在TabContent的tabBar属性中设计,我们如下示例代码使用@Builder装饰方法来定义组件的声明式UI描述。
@Builder TabBarBuilder(index: number) {
Column() {
Image(this.getTabBarImage(index))
Text(TAB_TITLE_DATA[index].title)
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height