Harmony--如何开发一个OpenHarmony购物APP导航页面--其乐融融的IT技术小站

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com

购物类App是现在最常用的一类App，也是我们在应用开发中经常遇到的场景。一款购物App界面通常包括了扫一扫功能、搜索框、轮播图、标签页、商品列表等功能，我们以橘子购物为例，介绍一下如何使用ArkTS开发一个购物类App。首先我们可以看一下最终实现效果：

如何开发一个OpenHarmony购物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('100%')
      .onClick(() => {
      this.controller.changeIndex(index)
      })
  }
  ...
  TabContent() {
        MainPage({ url: this.url })
      }.tabBar(this.TabBarBuilder(0))
  TabContent() {
        NewProduct({ url: this.url })
      }.tabBar(this.TabBarBuilder(1))
  TabContent() {
        ShopCart({ url: this.url })
      }.tabBar(this.TabBarBuilder(2))
  TabContent() {
        User()
      }.tabBar(this.TabBarBuilder(3))

其中MainPage，NewProduct，ShopCart，User表示各个页面的具体内容。常见的App通常是通过点击切换的，而不能通过滑动切换，如果想要禁用Tab的滑动切换可以使用将Tab的scrollable属性设计为false来实现。Tabs实现四个栏目切换达到上图效果的整体代码可以参考NavigationHomePage。

实现完最外层容器的标签页切换介绍后，我们再对主页进行简单介绍。首先对主页内容从上到下可以进行一个简单分解:

如何开发一个OpenHarmony购物app导航页面-开源基础软件社区

一号框中包含两张图片，使用两个image组件，其中二维码图片可以在onClick事件加入跳转逻辑跳转到二维码模块。

二号框为一个搜索框，使用TextInput组件。(示例代码中无具体功能，通过Image+Text进行展示)。

这两部分代码可以参考TitleBar。

根据我们以往使用购物App的经验，我们可以知道下滑过程中，最上方图片以及搜索框是一直存在的，即一二号框固定不动，三四五号框可以上下滑动，要实现这种效果只需要将后面三个框放到 Scroll组件中即可。

三号框可以使用Tab组件，参考代码见MainPage,示例代码中未实现具体功能，使用了Text进行展示。

四号框轮播图中使用Swiper实现轮播图效果,实现代码可以参考Swiper。

五号框是主页下半部分商品展示，这一部分看作一个Tabs，4个标签分别对应全部、精选、新品、实惠，每个Tab中包含了一个商品列表，列表中整齐地排列着各个商品元素，这类像栅格一样的场景我们可以通过GridRow嵌套GridCol实现，具体代码见HomePageContent。

综上所述，可以简单地画出导航页对应的结构图：

如何开发一个OpenHarmony购物app导航页面-开源基础软件社区

效果对比

我们将橘子购物实现效果与市面是常用的两款购物APP京东与闲鱼界面放在一起进行一个简单对比，我们可以发现作为一个示例，在美观方面与真实APP还是存在不小的差距，但是整体结构上基本相同，能够实现一个购物类应用的界面。
对于想要快速实现整体框架效果的读者,还可以使用如下代码通过Navigation+Tabs方式来快速实现。

完整实现代码

@Entry
    @Component
    struct NavigationExample {
      @State currentIndex: number = 0
      @State Build: Array

效果对比

完整实现代码

实现效果

相关推荐