实战16-NavBar

import { PADDING } from '../../constants/size'
import rvp from '../../utils/resposive/rvIndex'

@Component
export default struct NavBar {
  @StorageProp('topHeight') topHeight: number = 0;

  build() {
    Row() {
      Row({ space: rvp(6) }) {
        Image($r('app.media.bag')).width(rvp(16)).height(rvp(16)).fillColor($r('app.color.black'))
        Text('填写通勤地址').fontSize(rvp(12)).fontColor($r('app.color.black'))
      }

      Row({ space: rvp(28) }) {
        Column({ space: rvp(1) }) {
          Image($r('app.media.message')).width(rvp(20)).height(rvp(20))
          Text('消息').fontSize(rvp(10)).fontColor($r('app.color.black'))
        }

        Column({ space: rvp(1) }) {
          Image($r('app.media.journey')).width(rvp(20)).height(rvp(20))
          Text('行程').fontSize(rvp(10)).fontColor($r('app.color.black'))
        }
      }
    }
    .width('100%')
    .height(rvp(44))
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({ left: rvp(PADDING), right: rvp(PADDING) })
    .margin({ top: this.topHeight })
  }
}

import NavBar from '../views/See/NavBar'


@Component
export default struct See {
  build() {

    Column() {
      NavBar()
    }
    .width('100%')
    .height('100%')
    .linearGradient({
      direction: GradientDirection.Bottom, // 渐变方向
      colors: [['#DEFBE5', 0], ['#FFFFFF', 0.2]] // 数组末尾元素占比小于1时满足重复着色效果
    })

  }
}