鸿蒙学习-SideBarContainer、WaterFlow、animation、animateTo

用户771997962931
379 阅读3分钟

SideBarContainer、WaterFlow、animate、animateTo

今天我们来学习一下SideBarContainer侧边栏容器组件、WaterFlow瀑布流容器组件、animation动画以及animateTo显式动画

一、SideBarContainer

1.1作用及语法

作用：是一个容器组件，通过子组件定义测边栏和内容区域，第一个子组件为测边栏，第二个组件为内容区域。

语法：SideBarContainer(){组件1,组件2}

代码演示：

@Entry
@Component
struct zy {
  build() {
    Column(){
      //加侧边栏用SideBarContainer，里面只能有两个组件，第一个侧边栏，第二个侧边栏下内容
SideBarContainer(){
  //侧边栏内容
  Column(){
    Text('侧边栏')
  }
  .width(200)
  .backgroundColor(Color.Green)
  .height('100%')
  //侧边栏下内容
  Column(){
    Text('内容')
  }
  .width('100%')
  .backgroundColor(Color.Pink)
  .height('100%')
}
    }
    .width('100%')
    .height('100%')
  }
}

图片演示：

image.png

1.2、相关属性：

.showSideBar() ：控制侧边栏的打开与否

.showControlButton()：控制侧边栏按钮的显示与隐藏默认显示true

.sideBarWidth() ：控制侧边栏的宽度，默认值240vp，如超出最大宽度则使用最大宽度，如低于最小宽度则使用最小宽度

.minSideBarWidth() ：定义侧边栏最小宽度默认值240vp

.maxSideBarWidth() ：定义侧边栏最大宽度默认值280vp

.sideBarPosition(SideBarPosition.End) ：控制侧边栏显示位置，默认左边

属性代码演示：

@Entry
@Component
struct zy {
  build() {
    Column() {
      //加侧边栏用SideBarContainer，里面只能有两个组件，第一个侧边栏，第二个侧边栏下内容
      SideBarContainer() {
        //侧边栏内容
        Column() {
          Text('侧边栏')
        }
        .width(200)
        .backgroundColor(Color.Green)
        .height('100%')

        //侧边栏下内容
        Column() {
          Text('内容')
        }
        .width('100%')
        .backgroundColor(Color.Pink)
        .height('100%')
      }
      .showSideBar(true) //控制侧边栏的打开与否
      .showControlButton(true) //控制侧边栏按钮的显示与隐藏默认显示true
      .sideBarWidth(250) //控制侧边栏的宽度，默认值240vp，如超出最大宽度则使用最大宽度，如低于最小宽度则使用最小宽度
      .minSideBarWidth(100) //定义侧边栏最小宽度默认值240vp
      .maxSideBarWidth(350) //定义侧边栏最大宽度默认值280vp
      .sideBarPosition(SideBarPosition.End) //控制侧边栏显示位置，默认左边
    }
    .width('100%')
    .height('100%')
  }
}

小案例要求：

image.png

案例代码演示：


@Entry
@Component
struct zy {
  @State isshow:boolean = false
  build() {
    Column() {
      //加侧边栏用SideBarContainer，里面只能有两个组件，第一个侧边栏，第二个侧边栏下内容
      SideBarContainer() {
        //侧边栏内容
        Column() {
          Text('侧边栏')

          Button('关闭')
            .onClick(()=>{
              this.isshow = false
            })
        }
        .width(200)
        .backgroundColor(Color.Green)
        .height('100%')

        //侧边栏下内容
        Column() {
          Text('内容')
          Button('打开')
            .onClick(()=>{
              this.isshow = true
            })
        }
        .width('100%')
        .backgroundColor(Color.Pink)
        .height('100%')
      }
      .showSideBar($$this.isshow) //控制侧边栏的打开与否
      .showControlButton(false) //控制侧边栏按钮的显示与隐藏默认显示true
      .sideBarWidth('100%') //控制侧边栏的宽度，默认值240vp，如超出最大宽度则使用最大宽度，如低于最小宽度则使用最小宽度
      .minSideBarWidth(240) //定义侧边栏最小宽度默认值240vp
      .maxSideBarWidth(280) //定义侧边栏最大宽度默认值280vp
      .sideBarPosition(SideBarPosition.End) //控制侧边栏显示位置，默认左边
    }
    .width('100%')
    .height('100%')
  }
}

案例图片效果：

image.png

二、WaterFlow

2.1、作用及语法

作用：WaterFlow是一个容器组件，在容器内的各种组件的宽高不一致，参差不齐显示的时候使用瀑布流。

语法： WaterFlow() {

FlowItem() {}

FlowItem() {}

}

@Entry
@Component
struct zy {
  build() {
    Column() {
      WaterFlow() {
        FlowItem() {
          //组件
        }

        FlowItem() {
          //组件
        }
      }
    }
    .width('100%')
    .height('100%')
  }
}

2.2、常用参数及属性

常用的几个参数及作用：

image.png

常用的几个属性及作用：

.columnsTemplate() ：控制瀑布流有几列，未设置将单行显示

.columnsGap() ：列间距

.rowsGap() ：行间距

.layoutDirection(FlexDirection.Row/column)：水平滑动显示/垂直滑动显示 默认垂直滑动

.rowsTemplate()：控制瀑布流有几行，未设置将单列显示

.enableScrollInteraction()：控制滚动手势，默认true，false将无法拖动鼠标滚动

.scrollBar(BarState.On/off)：控制滚动条是否显示

.edgeEffect(EdgeEffect.Fade)：拖动到头部或底部有阴影效果，默认无效果

相关属性代码演示：

@Entry
@Component
struct zy {
  //定义尾部组件
  @Builder weibuBuilder(){
    Text('正在加载中.....')
      .width('100%')
      .fontSize(28)
      .fontColor(Color.Red)
  }
//组件控制器
  sc = new Scroller()
  build() {
    Column() {
      //通过按钮点击事件回到顶部
      Button('回到顶部')
        .onClick(()=>{
          this.sc.scrollEdge(Edge.Top)//通过控制器属性scrollEdge回到顶部
        })
      //瀑布流
      WaterFlow({
        footer:this.weibuBuilder(),//设置WaterFlow尾部组件
        scroller:this.sc//绑定组件控制器
      }) {
        FlowItem() {
          Column() {
          }
          .height(200)
          .backgroundColor(Color.Red)
          .width('100%')
        }

        FlowItem() {
          Row() {
          }.height(150)
          .backgroundColor(Color.Black)
          .width('100%')
        }

        FlowItem() {
          Column() {
          }.height(180)
          .backgroundColor(Color.Green)
          .width('100%')
        }

        FlowItem() {
          Column() {
          }.height(150)
          .backgroundColor(Color.Pink)
          .width('100%')
        }

        FlowItem() {
          Column() {
          }.height(99)
          .backgroundColor(Color.Yellow)
          .width('100%')
        }

        FlowItem() {
          Column() {
          }
          .height(230)
          .backgroundColor(Color.Gray)
          .width('100%')
        }

        FlowItem() {
          Column() {
          }
          .height(188)
          .backgroundColor(Color.Blue)
          .width('100%')
        }

        FlowItem() {
          Column() {
          }
          .height(230)
          .backgroundColor(Color.Gray)
          .width('100%')
        }

        FlowItem() {
          Column() {
          }.height(180)
          .backgroundColor(Color.Green)
          .width('100%')
        }

        FlowItem() {
          Row() {
          }.height(150)
          .backgroundColor(Color.Black)
          .width('100%')
        }

        FlowItem() {
          Column() {
          }
          .height(200)
          .backgroundColor(Color.Red)
          .width('100%')
        }
      }
      .columnsTemplate('1fr 1fr') //控制瀑布流有2列，未设置将单行显示
      .columnsGap(5) //列间距5
      .rowsGap(5) //行间距5
      // .layoutDirection(FlexDirection.Row)//水平滑动默认垂直滑动
      // .rowsTemplate('1fr 1fr')//控制瀑布流有两行
      .enableScrollInteraction(true)//控制滚动手势，默认true，false将无法拖动鼠标滚动
      .scrollBar(BarState.On)//控制滚动条常驻显示
      .edgeEffect(EdgeEffect.Fade)//拖动到头部或底部有阴影效果，默认无效果
    }
    .width('100%')
    .height('100%')
  }
}

效果图片：

image.png

小案例：

image.png

代码演示：

@Entry
@Component
struct zy {
  arr: number[] = Array.from({ length: 22 })

  col() {
    let r = Math.floor(Math.random() * 256)
    let g = Math.floor(Math.random() * 256)
    let b = Math.floor(Math.random() * 256)
    return `rgba(${r},${g},${b},0.7)`
  }

  hei() {
    return Math.floor(Math.random() * 201) + 100
  }
   @Builder dbBuilder(){
  Text('加载更多')
    .width('100%')
   }

  build() {
    Column() {

      WaterFlow({footer:this.dbBuilder()}) {
        ForEach(this.arr, () => {
          FlowItem() {

          }
          .width('100%')
          .height(this.hei())
          .backgroundColor(this.col())
        })

      }
      .columnsTemplate('1fr 1fr')
    }
    .width('100%')
    .height('100%')
  }
}

三、animation动画

3.1、作用及基本写法

作用：是在组件上做动画处理的

基本写法：

1.定义通用属性的值需要改变的状态变量

2.把状态变量放到属性值里面

3.使用animation监控属性值的变化

4.在点击事件里改变状态变量的值，组件会以动画的形式显示

代码演示：

@Entry
@Component
struct zy {
  //定义需要变化的通用属性（状态变量）
  @State col: ResourceColor = Color.Red
  @State w: number = 50
  @State h: number = 50

  build() {
    Column() {
      Row() {

      }
      .backgroundColor(this.col)
      .width(this.w)
      .height(this.h)
      .animation({ duration: 2000 })//动画效果（duration属性表示动画的时间默认1000毫秒）
      .onClick(() => {
        this.col = Color.Green
        this.w = 200
        this.h = 200
      })
    }
    .width('100%')
    .height('100%')
  }
}

效果图：

动画.gif

3.2、常用属性

duration:动画的播放时间默认1000毫秒

curve:设置动画曲线

iterations:动画播放次数

playMode:动画播放模式，默认播放完成后从头开始播放。

delay:延迟多久播放，单位毫秒

代码演示：

@Entry
@Component
struct zy {
  //定义需要变化的通用属性（状态变量）
  @State col: ResourceColor = Color.Red
  @State w: number = 50
  @State h: number = 50

  build() {
    Column() {
      Row() {

      }
      .backgroundColor(this.col)
      .width(this.w)
      .height(this.h)
      .animation({
        duration: 2000 ,//动画的播放时间默认1000毫秒
        curve:Curve.EaseIn,//表示动画以低速开始
        iterations:-1,//开启循环播放
        playMode:PlayMode.Alternate,//表示动画在奇数次正向播放在偶数次反向播放
        delay:2000//延迟两秒播放
      })//动画效果
      .onClick(() => {
        this.col = Color.Green
        this.w = 200
        this.h = 200
      })
    }
    .width('100%')
    .height('100%')
  }
}

效果图：

动画.gif

小案例：

image.png

案例代码：

@Entry
@Component
struct zy {
  //缩放的状态变量
  @State sca:number = 1
  build() {
    Column(){
Text('全场低至一分购')
  .border({width:1,color:'#e8b66c'})
  .fontSize(30)
  .fontWeight(800)
  .fontColor(Color.Red)
  .height(60)
  .borderRadius(20)
  .margin({top:30})
  .padding(10)
  .backgroundColor('#e8b66c')
  .scale({x:this.sca,y:this.sca})
  .animation({
    iterations:-1,//循环播放
    playMode:PlayMode.Alternate//动画在奇数次正向播放在偶数次反向播放
  })
  .onClick(()=>{
    this.sca = 0.6
  })
    }
    .width('100%')
    .height('100%')
  }
}

图片展示：

动画.gif

事件

image.png

小案例改造为组件加载自动触发：只需将点击事件改为组件加载触发事件

image.png

效果图：

动画.gif

四、 显式动画animateTo

作用：属性动画 animation是作为属性使用，而animateTo显示动画是一个系统的内置函数，可以直接调用，一般事件触发时一起使用，比如点击事件，滚动事件等等

语法： animateTo({参数 1 动画选项 和 animation 相同}, () => {

参数 2 箭头函数，状态变量的修改写在里面

})

前面我们有一个侧边栏自定义了打开与关闭按钮，隐藏了自带的开关按钮，以至于我们打开和关闭侧边栏的时候是瞬间打开和关闭的没有任何动画，现在我们就用animateTo来改造一下加上动画效果

代码演示：


@Entry
@Component
struct zy {
  @State isshow:boolean = false
  build() {
    Column() {
      //加侧边栏用SideBarContainer，里面只能有两个组件，第一个侧边栏，第二个侧边栏下内容
      SideBarContainer() {
        //侧边栏内容
        Column() {
          Text('侧边栏')

          Button('关闭')
            .onClick(()=>{
            //打开的动画速度3000毫秒
              animateTo({duration:3000},()=>{
                this.isshow = false
              })
            })
        }
        .width(200)
        .backgroundColor(Color.Green)
        .height('100%')
        //侧边栏下内容
        Column() {
          Text('内容')
          Button('打开')
            .onClick(()=>{
            //打开的动画速度1500毫秒
              animateTo({duration:1500},()=>{
                this.isshow = true
              })
            })
        }
        .width('100%')
        .backgroundColor(Color.Pink)
        .height('100%')
      }
      .showSideBar($$this.isshow) //控制侧边栏的打开与否
      .showControlButton(false) //控制侧边栏按钮的显示与隐藏默认显示true
      .sideBarWidth('100%') //控制侧边栏的宽度，默认值240vp，如超出最大宽度则使用最大宽度，如低于最小宽度则使用最小宽度
      .minSideBarWidth(240) //定义侧边栏最小宽度默认值240vp
      .maxSideBarWidth(280) //定义侧边栏最大宽度默认值280vp
      .sideBarPosition(SideBarPosition.End) //控制侧边栏显示位置，默认左边
    }
    .width('100%')
    .height('100%')
  }
}

效果图：

动画.gif

结语

好了，这就是我们今天学习的内容了，这些组件及属性都是我们在鸿蒙开发中常用的组件和属性，在我们日常生活中经常看到由这些代码写出来的内容，就比如在抖音里面的侧边栏、抖音商城里面的瀑布流和一些常见的动画等等，重要性就不言而喻了吧，让我们好好学习一下这些内容并学以致用起来吧！

avatar
文章
阅读
粉丝