鸿蒙Harmony应用开发，数据驾驶舱页面的实现

先来看看我们要实现的驾驶舱的页面是什么样的

对于这种 响应式布局的页面构建，我们的脑子里面要有一个概念，就是"分而治之"。我们把这个页面进行分割，分割成不同的块然后再来逐个实现. 不难发现，我们可以将这个看到的效果简单的分割：1.首先在顶部有个banner轮播，我们称之为顶部区域。2.紧接着有个时间筛选的区域，这个筛选区域和上面的轮播有个层叠部分，筛选区域最下面有个5个TAB切换按钮.，3. 下面经营指标的展示。

所以我们可以用一个Column控件，分成head( ) ,option( ) ,biz( ) 三块来实现。由于整改页面的内容都比较长，所以在Column的外层在用一个Scroll组件来包裹。head( )和option( ) 之间的间隔可以用.margin({ top: -20 })来实现.

接下来我们来逐个讲述一下各个区域的实现:

• head( )

head头部区域是一个轮播图，我们用一个Stack层叠布局作为根布局，然后我们有个蓝色的背景图，作为整个背景。在一个Banner控件作为页面的内容，Banner 中每个ITEM的 内容大概是 左边文字 中间图标 右边文字的组成形式

对此我们将Banner的ITEM封装成一个单独的组件 大题实现部分如下 :

export struct BannerItemView {
  // @Link model: BannerItemModel
  @Prop model: BannerItemModel

  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 主要内容
      Row() {
        // 左侧文本
        Column() {
          Text(this.model.leftTile).fontColor(Color.White).fontSize(16)
          Text(`${this.model.leftValue}`)
            .fontColor("#00d8fe")
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
            .margin({ top: 8 })
          Text('环比').fontColor(Color.White).fontSize(14).margin({ top: 8 })

          TriangleIcon({
            isUp: this.model.mQOQRate > 0,
            IconSize: 10
          }).margin({ top: 8 })
          Text(`${this.model.mQOQRate}%`).fontColor(Color.Red).fontSize(14).margin({ top: 8 })
        }
        .margin({ left: 15 })
        .alignItems(HorizontalAlign.Start)

        // 中间图片
        Image($r(this.