鸿蒙开发-淘宝手机端

淘宝

完成效果图：

顶部

顶部用一个大的flex套住，里面再分成两部分，一部分是签到，一部分是文本输入，小图标用阿里巴巴矢量图下载到本地，小图标名字不能用中文会报错

//顶部
Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceEvenly,
  direction: FlexDirection.Column }) {
  //顶部导航
  Row() {
    Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
      Row() {
        Image($r("app.media.qd")).width("6%").height("20%")
        Text('签到').fontSize('17')
      }
      Text('关注').fontSize('17')
      Column() {
        Text('推荐').fontSize('17').fontWeight(FontWeight.Bold)
        Divider().width("7%").color(Color.Red)
      }
      Row() {
        Text('美力日').fontSize('17').fontWeight(FontWeight.Bold).fontColor("rgb(254,71,169)")
        Image($r("app.media.down")).width("4%").height("4%")
      }
    }
  }
  //顶部搜索
  Row() {
    Image($r("app.media.239")).width("5%").height("17%")
    TextInput({ placeholder: '透气防晒衣' })
      .backgroundColor(Color.White)
      .width('90%')
      .height('35%')
    Button('搜索')
      .backgroundColor("rgb(255,90,2)")
      .height("30%")
      .width('20%')
      .margin({ left: '-18%' })
  }.width('100%').justifyContent(FlexAlign.Center)
}.width('100%').height('15%').backgroundColor(("rgb(248,243,247)"))

中间导航