鸿蒙开发-淘宝手机端

淘宝

完成效果图：

顶部

顶部用一个大的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)"))

中间导航

中间导航用一个大的flex里面有5个flex，先写一个页面的flex，

大的flex宽设成100%，有5个flex，每个flex宽设为20%，左右滑动加一个swiper，swiper里面套两个大的flex

Flex({
  direction: FlexDirection.Column,
  alignItems: ItemAlign.Center,
  justifyContent: FlexAlign.SpaceEvenly
}) {
  Image($r("app.media.sale")).width("50%").height("50%")
  Text('天天特卖')
}.width("20%")

这个是大的flex里面其中之一

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly }) {

}.width("100%").height("13%").backgroundColor("rgb(255,246,247)")

这是一个大的flex

淘宝买菜

中间的淘宝买菜部分也分成5个部分，文字部分是垂直布局里有3行字

图片加文字也是是垂直布局

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center }) {
  //文字
  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceEvenly }) {
    Text("淘宝买菜").fontWeight(FontWeight.Bold)
    Row() {
      Text("次日自提").fontColor(Color.White)
    }
    .width(75).backgroundColor("rgb(81,201,42)").height(25)

    Row() {
      Image($r("app.media.wz")).width("8%").height("17%")
      Text("沈阳专供")
    }
  }.width("20%").height("100%")

  //商品西红柿
  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceEvenly }) {
    Image($r("app.media.tomato")).width("85%").height("70%")
    Row() {
      Text("￥2.59").fontColor(Color.White)
    }.backgroundColor("rgb(255,80,0)")
  }.width("20%")
  //商品蓝莓
  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceEvenly }) {
    Image($r("app.media.lm")).width("100%").height("70%")
    Row() {
      Text("￥8.29").fontColor(Color.White)
    }.backgroundColor("rgb(255,80,0)")
  }.width("20%")
  //商品酱油
  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceEvenly }) {
    Image($r("app.media.jy")).width("60%").height("70%")
    Row() {
      Text("￥6.99").fontColor(Color.White)
    }.backgroundColor("rgb(255,80,0)")
  }.width("20%")
  //酱油
  Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
    Image($r("app.media.hb")).width("75%").height("70%")
  }.width("20%")

}.width("100%").height("13%")

商品推荐

商品推荐，按每一行两个商品，都写在flex里面，

Flex({ direction: FlexDirection.Row, wrap:FlexWrap.Wrap,alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceEvenly }) {

}.width("100%").height("30%").backgroundColor("rgb(240,240,240)")

一个商品里再用垂直布局，让字体加背景颜色需要再套一个row标签，改变row的背景色，宽高

Column() {
  Image($r("app.media.one")).width("50%").height("50%")
  Text('冰丝防晒衣女款防晒服夏')
  Text('500+人付款').fontColor(Color.Red)
  Row() {
    Row() {
      Text("￥69.9").fontColor(Color.White)
    }.backgroundColor("rgb(255,79,3)").width("60%").height("13%")
    Row() {
      Text('去购买').fontColor("rgb(255,79,3)")
    }.backgroundColor("rgb(253,253,150)").width("30%").height("13%")
  }
}
.width("48%")
.height("95%")
.backgroundColor(Color.White)
.borderRadius(8)

Scroll

Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动

为显示更多内容可以滑动，写Scroll（）但是他里面只能有一个标签存在，所以在里面套一个的Column，让什么内容滑动这两个组件就套到哪，Scroll要设制高度，内容超过这个高度也会显示，因为我不让顶部和底部导航不到，所以他们俩除这两个不套别的都套上

Scroll() {
  Column() {

 }
}.width("100%").height("78%")

底部导航

Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceAround}){
  Column(){
  Image($r("app.media.tb")).width("80%").height("100%")
  }.width("20%")
  Column(){
    Image($r("app.media.sp")).width("60%").height("70%")
    Text("视频")
  }.width("20%")
  Column(){
    Image($r("app.media.message")).width("60%").height("70%")
    Text("消息")
  }.width("20%")
  Column(){
    Image($r("app.media.gwc")).width("60%").height("70%")
    Text("购物车")
  }.width("20%")
  Column(){
    Image($r("app.media.wdtb")).width("60%").height("70%")
    Text("我的淘宝")
  }.width("20%")

}.width("100%").height("7%")

实现点击出现下拉框事件

Stack层叠让下拉框覆盖住哪里，就框住那里，我是让他把全部内容都框柱了

下拉框的zindex层数要比被他覆盖的部分高，所以设置了下拉框的zindex是2，剩下的一大部分都是zindex是1，还要保证下拉框和被覆盖全都是兄弟组件z序排列菜好使，在用相对定位让他脱离文本流

Column({ space: 5 }) {
  Text('美力日')
  Text('文玩节')
  Text('采购节')
  Text('家上新')
}
.backgroundColor(Color.White).width(90)
.height(100).borderRadius(10).zIndex(2)
.position({
  x: 210, y: 40
})
.visibility(this.list)

Visibility：控制当前组件显示或隐藏

Visibility：显示

None:不显示,不站位

Hidden:不显示，站位

其次点击下箭头，让原本隐藏的下拉框显示，再次点击让显示的下拉框隐藏

给下箭头添加点击事件

@State list: Visibility = Visibility.Hidden

Row() {
  Image(this.img).width("40%").height("30%")
}.width(30).height(20)
.onClick(()=>{
  this.list=Visibility.Visible
})

.onClick(()=>{
  if (this.list) {
    this.list=Visibility.Visible
    this.img=$r("app.media.up")
  } else {
    this.list=Visibility.Hidden
    this.img=$r("app.media.down")
  }
})

自动轮播图片

Swiper(){
  Image($r("app.media.two")).width("90%").height("80%")
  Image($r("app.media.one")).width("90%").height("80%")
  Image($r("app.media.three")).width("90%").height("80%")
  Image($r("app.media.four")).width("90%").height("80%")
}.interval(2000).autoPlay(true)

Swiper：滑块视图容器，提供子组件滑动轮播显示的能力

autoPlay:子组件是否自动播放

Interval:使用自动播放时播放的时间间隔，单位为毫秒