鸿蒙开发next【股票类】一多开发实例

一多开发实例（股票类）概述

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

• 核心功能：

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

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

• 关键场景：

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

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

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

UX设计

金融理财类的多设备响应式设计指南

架构设计

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