【鸿蒙实战开发】一多开发实例（股票类）

最新推荐文章于 2025-03-17 08:55:53 发布

CTrup

最新推荐文章于 2025-03-17 08:55:53 发布

阅读量722

点赞数 20

分类专栏：鸿蒙开发移动开发 HarmonyOS 文章标签： harmonyos 鸿蒙开发一次开发多端部署 ArkUI 组件化界面布局 APP架构

本文链接：https://blog.csdn.net/CTrup/article/details/143130412

版权

移动开发同时被 3 个专栏收录

704 篇文章

订阅专栏

鸿蒙开发

688 篇文章

订阅专栏

HarmonyOS

651 篇文章

订阅专栏

往期推文全新看点

概述

本文从目前流行的垂类市场中，选择股票类应用作为典型案例，详细介绍 “一多在实际开发中的应用。主要包含首页、资讯、自选股、个股详情、行情等9个典型页面。

核心功能：

分栏布局：分栏布局通过 Navigation 实现，在断点为lg时设置mode属性为NavigationMode.Stack，实现单栏效果，在其他断点下设置mode属性为NavigationMode.Split，实现分栏效果。

宫格卡片的多股同列：用网格布局 Grid组件，在不同断点下将父组件分为不同列数，来实现自适应布局的占比能力。

关键场景：

首页-股票页签：借助栅格布局监听断点变化，同时设置layoutWeight属性为1，实现居中对齐自适应拉伸。

股票PK详情-核心指标：使用 Blank组件及设置固定宽度可实现数据各列的空白空间自适应拉伸，同时对不同列设置不同的alignItems，支持不同列设置不同对齐方式。

行情-股票双页签：借助栅格布局监听断点变化，改变 List组件下子组件的间隔宽度，同时给List组件设置固定宽度，当List组件下的tab内容超过设定宽度时隐藏部分tab，延伸显示更多。

下面的章节将分别从、架构设计、页面开发三个角度给出推荐的参考样例，介绍“一多”股票类应用在开发过程中的最佳实践。

架构设计

HarmonyOS的分层架构主要包括三个层次：产品定制层、基础特性层和公共能力层，为开发者构建了一个清晰、高效、可扩展的设计架构。

页面开发

本章介绍股票类应用中如何使用”一多”的布局能力，完成页面层级的一套页面、多端适配。下文将从不同页面展开，介绍每个页面区域使用到具体的布局能力，帮助开发者从零到一进行股票类应用的开发。

首页

将首页划分为7个部分，效果图如下：

示意图	sm	md	lg
效果图

对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	底部/侧边页签	借助栅格布局监听断点变化改变位置，设置在不同断点下Tabs组件的vertical属性，实现显示在页面的不同位置。
2	标题	List组件实现延伸能力，layoutWeight实现拉伸能力。
3	快捷入口	List组件实现延伸能力
4	Banner	使用 Swiper组件，设置在不同断点下的displayCount属性来实现自适应布局的延伸能力。
5	中间tab	借助栅格布局监听断点变化，同时设置layoutWeight属性为1，实现居中对齐自适应拉伸，示例代码为：股票页签。
6	指数	使用 Swiper组件自适应增加个数，代码可参考一多开发实例（长视频）。
7	热门	通过 Swiper组件的displayCount属性并结合断点，控制在不同断点下显示不同的列数

股票页签

借助栅格布局监听断点变化，不同断点 List组件] 子组件的间隔设置为不同值，同时设置layoutWeight属性为1，实现居中对齐自适应拉伸。

import { ListDataConstants } from '../constants/ListDataConstants';
import { CommonConstants } from '../../constants/CommonConstants';
import { BreakpointType } from '../../utils/BreakpointType';

@Entry
@Component
export struct AdaptiveTabCenteringIndex {
  @StorageLink('breakPoint') breakPoint: string = CommonConstants.BREAK_POINT_SM;
  @Consume('pageInfos') pageInfos: NavPathStack;
  @State tabIndexSelected: number = 0;

  build() {
    NavDestination() {
      Column() {
        ...
        Column() {
          Row() {
            Column() {
              List({
                // 借助栅格布局监听断点变化，不同断点List子组件的间隔设置为不同值
                space: new BreakpointType(CommonConstants.TAB_PADDING_SM, CommonConstants.TAB_PADDING_MD,
                  CommonConstants.TAB_PADDING_LG).getValue(this.breakPoint)
              }) {
                ForEach(ListDataConstants.RECOMMENDATION_TAB_LIST, (item: string, index: number) => {
                  ListItem() {
                    Column() {
                      Text(item)
                        ...
                    }
                  }
                  ...
                }, (item: number, index: number) => index + JSON.stringify(item))
              }
              .scrollBar(BarState.Off)
              .listDirection(Axis.Horizontal)
            }
            ...
            .layoutWeight(CommonConstants.COMMON_FAL_1)
          }
          ...
        }
        ...
      }
    }
  }
  .hideTitleBar(true)
}

资讯

将资讯页划分为4个部分，效果图如下：

示意图	sm	md	lg
效果图

对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	底部/侧边页签	借助栅格布局监听断点变化改变位置，设置在不同断点下Tabs组件的vertical属性，实现显示在页面的不同位置
2	标题	文字和功能按钮中间增加 Blank组件，实现拉伸能力。
3	中间Tab	借助栅格布局监听断点变化，不同断点占比不同，同时设置layoutWeight属性为1，实现居中对齐自适应拉伸，代码可参考：股票页签。
4	卡片	使用 WaterFlow组件设置columnsTemplate属性实现单列变多列

整个页面使用的是分栏布局，点击某一个资讯卡片时，可分栏显示新闻资讯详情。

自选股

将自选股页划分为4个部分，效果图如下：

示意图	sm	md	lg
效果图

对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	底部/侧边页签	借助栅格布局监听断点变化改变位置，设置在不同断点下Tabs组件的vertical属性，实现显示在页面的不同位置
2	标题	文字和功能按钮中间增加 Blank组件，实现拉伸能力。
3	指数	最后一个组件固定，其他组件使用 List组件实现延伸能力，随着设备宽度变大，页签间距变大、页面能够展示更多页签内容
4	股票列表	使用 Blank组件及设置固定宽度可实现数据各列的空白空间自适应拉伸，同时对不同列设置不同的alignItems，支持不同列设置不同对齐方式，示例代码同核心指标。

整个页面使用的是分栏布局，点击某一股票时，可分栏显示新闻资讯详情，该功能在一多银行理财中有详细介绍。

个股详情

将个股详情页划分为6个部分，效果图如下：

示意图	sm	md	lg
效果图

对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	交易操作行	使用 List组件实现延伸能力，同时使用layoutWeight将增加的空间全部分配给”去交易”按钮，实现拉伸能力。
2	标题	居中显示，其他操作两端对齐，空白空间使用 Blank组件实现自适应布局拉伸能力。
3	行情列表数据	行情居左放大显示，通过 Swiper组件的displayCount属性并结合断点，控制在不同断点下显示不同的列数，列表自适应两列变多列。
4	中间Tab	通过 List组件实现自适应延伸。
5	曲线图	使用layoutWeight属性实现拉伸能力。
6	讨论的Tab	通过 List组件实现自适应延伸。

该页面同上个页面布局相似，整体结构为分栏布局。

添加股票

将添加股票页划分为4个部分，效果图如下：

示意图	sm	md	lg
效果图

对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	标题	空白空间使用 Blank组件实现自适应布局拉伸能力。
2	列表	第一列和后面两列两端对齐，中间增加 Blank组件，实现自适应拉伸。
3	猜你想找	通过 List组件实现自适应延伸
4	PK按钮	使用layoutWeight属性将剩余空间分配给开始PK按钮实现拉伸能力。

股票PK详情

将股票PK详情页划分为6个部分，效果图如下：

示意图	sm	md	lg
效果图

对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	标题	空白空间使用 Blank组件实现自适应拉伸。
2	卡片	固定宽度，居左显示。
3	中间Tab	使用 Blank组件实现自适应布局拉伸能力。
4	曲线图	使用layoutWeight属性实现拉伸能力。
5	时间维度	设置 Flex布局的justifyContent属性为FlexAlign.SpaceBetween，实现自适应拉伸。
6	指标名称和核心指标	使用 Blank组件及设置固定宽度可实现数据各列的空白空间自适应拉伸，同时对不同列设置不同的alignItems，支持不同列设置不同对齐方式，示例代码如：核心指标。

核心指标

使用 Blank组件作为数据各列的空白空间，同时给各列数据及表格整体设置固定宽度，可实现数据各列的空白空间自适应拉伸。

对不同列设置不同的alignItems，支持不同列设置不同对齐方式。

...
Row() {
  Column() {
    ForEach(ListDataConstants.INDICATOR_NAME_COLUMN, (item: string, index: number) => {
      ...
    }, (item: string, index: number) => index + JSON.stringify(item))
  }
  .alignItems(HorizontalAlign.Start)

  Blank()

  Column() {
    ForEach(ListDataConstants.STOCK_INDEX_DATA1, (item: string, index: number) => {
      ...
    }, (item: string, index: number) => index + JSON.stringify(item))
  }
  .width(CommonConstants.STOCK_DATA_WIDTH)
  .alignItems(HorizontalAlign.End)

  Blank()

  Column() {
    ForEach(ListDataConstants.STOCK_INDEX_DATA2, (item: string, index: number) => {
      ...
    }, (item: string, index: number) => index + JSON.stringify(item))
  }
  .width(CommonConstants.STOCK_DATA_WIDTH)
  .alignItems(HorizontalAlign.End)

  Blank()

  Column() {
    ForEach(ListDataConstants.STOCK_INDEX_DATA3, (item: string, index: number) => {
      ...
    }, (item: string, index: number) => index + JSON.stringify(item))
  }
  .width(CommonConstants.STOCK_DATA_WIDTH)
  .alignItems(HorizontalAlign.End)
}
.width(CommonConstants.FULL_WIDTH_PERCENT)
...

行情

将行情页划分为6个部分，效果图如下：

示意图	sm	md	lg
效果图

对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	底部/侧边页签	借助栅格布局监听断点变化改变位置，设置在不同断点下Tabs组件的vertical属性，实现显示在页面的不同位置。
2	标题	使用 Blank组件实现空白空间自适应拉伸。
3	双Tab	借助栅格布局监听断点变化，改变 List组件下子组件的间隔宽度，同时给List组件设置固定宽度，当List组件下的tab内容超过设定宽度时隐藏部分tab，延伸显示更多，示例代码如：股票双页签。
4	卡片	使用 Swiper组件，设置在不同断点下的displayCount属性来实现自适应布局的延伸能力（同首页Banner图）。
5	快捷入口	使用 List组件实现自适应布局的延伸能力，随容器组件尺寸变大，可以看到的卡片入口相应增加。
6	大盘分析和热门板块	使用挪移布局来实现“上下布局”与“左右布局”间的切换

股票双页签

借助栅格布局监听断点变化，改变 List组件下子组件的间隔宽度，同时给List组件设置固定宽度，当List组件下的tab内容超过设定宽度时隐藏部分tab，延伸显示更多。

...
Row() {
  Column() {
    List({
      space: new BreakpointType(CommonConstants.DOUBLE_TAB_PADDING_SM, CommonConstants.DOUBLE_TAB_PADDING_MD1,
        CommonConstants.DOUBLE_TAB_PADDING_LG1).getValue(this.breakPoint)
    }) {
      ForEach(ListDataConstants.STOCK_OPTIONS_LIST1, (item: string, index: number) => {
        ListItem() {
          Column() {
            Text(item)
              ...
          }
        }
        ...
      }, (item: number, index: number) => index + JSON.stringify(item))

      ListItem() {
        Image($r('app.media.ic_public_more'))
          ...
      }
      ...
    }
    .scrollBar(BarState.Off)
    .listDirection(Axis.Horizontal)
  }
  .width(CommonConstants.WIDTH_296)
  ...
}
...

行情-选股

将行情-选股页划分为5个部分，效果图如下：

示意图	sm	md	lg
效果图

对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	底部/侧边页签	借助栅格布局监听断点变化改变位置，设置在不同断点下Tabs组件的vertical属性，实现显示在页面的不同位置。
2	标题	使用 Blank组件实现空白空间自适应拉伸。
3	快捷入口	使用 List组件实现自适应布局的延伸能力，随容器组件尺寸变大，可以看到的卡片入口相应增加。
4	今日主力和特色榜单	使用挪移布局来实现“上下布局”与“左右布局”间的切换
5	价值关注	通过 List组件实现单列变多列使用 WaterFlow组件设置columnsTemplate属性实现单列变多列

多股同列

将多股同列页划分为3个部分，效果图如下：

示意图	sm	md	lg
效果图

对其中的各个区域分析使用的一多能力，实现方案如下表：

区域编号	简介	实现方案
1	标题	居中显示，其他操作两端对齐，空白空间使用 Blank组件实现自适应拉伸。
2	中间Tab	借助栅格布局监听断点变化，使用 List组件改变tab间距，展示更多tab内容，实现延伸能力。
3	卡片	用网格布局 Grid组件，在不同断点下调整columnsTemplate属性将父组件分为不同列数，来实现自适应布局的占比能力。