鸿蒙应用开发-SideBarContainer（侧边栏）和 WaterFlow（瀑布流）

一、 SideBarContainer（侧边栏）

1.了解SideBarContainer

提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。场景：

2.基本用法

说明
子组件类型：系统组件和自定义组件
子组件个数：必须且仅包含2个子组件，第一个位置的组件作为侧边栏的内容，第二个位置的组件是内容
子组件个数异常时：3个或以上子组件，显示第一个和第二个。1个子组件显示侧边栏，内容区为空白。

@Entry
@Component
struct Index {
  build() {
    Column() {
      SideBarContainer(){
        Column(){      //子组件1
          Text('侧边栏内容')
        }
        .backgroundColor(Color.Pink)
        Column(){   // 子组件2
          Text('内容')
        }
        .backgroundColor(Color.Green)
      }
    }
    .width('100%')
    .height('100%')
  }
}

（1）可选参数

@Entry
@Component
struct Index {
  build() {
    Column() {
      SideBarContainer(
        // SideBarContainerType.Embed //（默认值）侧边栏内容和内容区并列显示
                                     // 不设置showSideBar时与SideBarContainerType.Overlay效果一样
        SideBarContainerType.Overlay //侧边栏内容覆盖在内容区上面
      ){
        Column(){
          Text('侧边栏内容')
        }
        .backgroundColor(Color.Pink)
        Column(){
          Text('内容')
        }
        .backgroundColor(Color.Green)
      }
      .showSideBar(false)
    }
    .width('100%')
    .height('100%')
  }
}

（2）属性

属性	类型	描述
.showSideBar()	boolean	设置是否显示侧边栏。true（默认值）：显示侧边栏false：不显示侧边栏。从API version 10开始，该属性支持[$$]双向绑定变量。
.showControlButton()	boolean	设置是否显示控制按钮。true（默认值）：显示控制按钮false：不显示控制按钮
.sideBarWidth()	number、Length	设置侧边栏的宽度。默认值：240vp，单位：vp。超出minSideBarWidth和maxSideBarWidth设定的范围后以minSideBarWidth和maxSideBarWidth的值为宽度
.sideBarPosition()	SideBarPosition	SideBarPosition.End：右边显示 SideBarPosition.Start（默认值）：左边显示
.minSideBarWidth()	number、Length9+	设置侧边栏最小宽度。默认值：240vp
.maxSideBarWidth()	number、Length9+	设置侧边栏最大宽度。默认值：280vp

@Entry
@Component
struct Index {
  @State isShow:boolean = false
  build() {
    Column() {
      SideBarContainer(SideBarContainerType.Overlay){ //覆盖显示
        Column(){
          Text('侧边栏内容')
          Button('关闭')
            .onClick(()=>{
              this.isShow=false
            })
        }
        .backgroundColor(Color.Pink)
        Column(){
          Text('内容')
          Button('打开')
            .onClick(()=>{
              this.isShow=true
            })
        }
        .backgroundColor(Color.Green)
      }
      .showSideBar($$this.isShow) //不显示侧边栏
      .showControlButton(false) //不显示控制按钮
      .sideBarWidth('80%')  //侧边栏宽度
      .sideBarPosition(SideBarPosition.End) //右边显示
      .maxSideBarWidth('100%')//最大宽度
    }
    .width('100%')
    .height('100%')
  }
}

！！！自定义控制侧边栏的打开和关闭是没有动画效果的（瞬间打开），如需显示动画需要使用动画属性

二、 WaterFlow（瀑布流）

1.了解WaterFlow

瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。！！！WaterFlow 组件的用法和Grid组件类似。 场景：

2.基本用法

WaterFlow({参数}) {
  FlowItem() {} //子组件
  FlowItem() {}
  ...
}
  .属性()

3.参数和属性

常用参数：

参数名	参数类型	必填	参数描述
footer	CustomBuilder	否	设置WaterFlow尾部组件。
scroller	Scroller	否	可滚动组件的控制器，与可滚动组件绑定。说明：不允许和其他滚动类组件，如：List、Grid、Scroll等绑定同一个滚动控制对象。

常用属性：

名称	参数类型	描述
columnsTemplate	string	设置当前瀑布流组件布局列的数量，不设置时默认1列。例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。默认值：'1fr'
rowsTemplate	string	设置当前瀑布流组件布局行的数量，不设置时默认1行。需要配合如下一起使用：.layoutDirection(FlexDirection.Row) // 设置滚动方向为水平.rowsTemplate('1fr 1fr')
columnsGap	Length	设置列与列的间距。默认值：0
rowsGap	Length	设置行与行的间距。默认值：0
enableScrollInteraction	boolean	设置是否支持滚动手势，当设置为false时，无法通过手指或者鼠标滚动，但不影响控制器的滚动接口。默认值：true
scrollBar	BarState	设置滚动条状态。默认值：BarState.Off说明：滚动条位置和长度以已布局过的总高度和当前偏移为准，在瀑布流布局全部子节点之前随着滑动持续变化。
edgeEffect	value:EdgeEffect, options?:EdgeEffectOptions	设置边缘滑动效果。- value：设置瀑布流组件的边缘滑动效果，支持弹簧效果和阴影效果。默认值：EdgeEffect.None- options：设置组件内容大小小于组件自身时，是否开启滑动效果。默认值：false

代码实现：

1. 等宽两列瀑布流
2. 每一项高度随机，颜色随机，宽度 100%

@Entry
@Component
struct Index {
  // 随机颜色
  randemColor(){
    let r = Math.floor(Math.random()*256) // Math.random()取随机数[0,1)能取到0，取不到1
    let g = Math.floor(Math.random()*256) //  Math.floor()向下取整 例如：Math.floor(1.9)=1
    let b = Math.floor(Math.random()*256)
    return `rgba(${r},${g},${b},0.5)`
  }
  // 随机高度[100,300)
  randomHeight(){
    return Math.floor(Math.random()*201)+100
  }
  //定义一个长度为20的数组（没有值）
  arr:number[] = Array.from({length:20})

  build() {
    Column() {
      WaterFlow() {
        ForEach(this.arr,()=>{
          FlowItem() {
            Column() {}
            .width('100%')
            .height(this.randomHeight())
            .backgroundColor(this.randemColor())
          }
        })
      }
      .columnsTemplate('1fr 1fr') //设置为2列
      // .rowsTemplate('1fr 1fr') //设置为2行
      // .layoutDirection(FlexDirection.Row) // 横向滚动
      .enableScrollInteraction(true)  //支持手势滚动
      .columnsGap(5)  // 列之间的间距
      .rowsGap(5)   // 行之间的间距
      .scrollBar(BarState.On)  // 滚动条常驻显示
      .edgeEffect(EdgeEffect.Spring)  //滑动到边缘时有弹簧效果
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}

4.小红书案例

实现效果：

代码如下： ！！！注意：链接可能会失效

//数据接口
interface WaterFlowItem {
  nickName: string
  avatar: string
  cover: string
  likedCount: string
  displayTitle: string
}

@Entry
@Component
struct waterFlowDemo {
  //数据
  list: WaterFlowItem[] = [
    {
      nickName: 'superJ',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/6101120d28d08a14c96759b7.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/b58b355cd1b3604b72c41d41d4549e01/1000g0082jv8olpaii0004a1mpf511sca35ugh8g!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '文华东方的神级果酱 玫瑰园里的草莓喷泉'
    },
    {
      nickName: '小红薯66BD15F5',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/645b7f8f2a34639eb26eb1cd.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/296bb944c637c56f533fe1aed21136fd/1000g0082k926h82ja0005nt74gbg91qsr17itro!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '懒人做饭47 '
    },
    {
      nickName: '再吃四次舒芙蕾',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo30ujteigjl8005oeh18r41d5ijl2bklo',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/73a6cab445054f40a996b53a5797e445/1000g0082jfneprmio0005oeh18r41d5i2d9nnlo!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '请吃饭的漂亮姐姐💗'
    },
    {
      nickName: 'KL吃透透',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/63a95f04877f58de106fcce1.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/1479fd7e1bf8f9475e4c2b426665c6ad/110/0/01e479a148ba255f001000000001887b1e25fb_0.jpg!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: 'Ampang太子园道地风味麻辣板面！'
    },
    {
      nickName: '何阿姨hoayee',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/5ef97c8fecd7e90001debc55.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/597943aa8a0070dfb896553a1cc9879d/1000g0082kk3sgkaj403045l90cg5tusmfm3c14g!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '广州的！ '
    },
    {
      nickName: '農場小高與老墨',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/62681accad8eea75cc37208a.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/3e09fda03661e3e8c9a211b8210fb8c3/1000g0082jisdktij20005nvtbqa084kmjcphcqo!nc_n_webp_prv_1',
      likedCount: '9',
      displayTitle: '農場小高//加州雷尼爾黃櫻桃'
    },
    {
      nickName: '美食二胖',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/641aadbae33a6ed3c5135160.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/8c0cd5c716c01198d0c6d62250d9b49c/1000g0082k9jh4jej40605niaoqv09dglfivfmj8!nc_n_webp_prv_1',
      likedCount: '1千+',
      displayTitle: '发面美食做法 '
    },
    {
      nickName: '单小姐的生活碎片',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/6456eed6777659a44a2320c6.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/c9de577e892dd171ea5cea839153f513/1000g0082lb2fh28j20005n8vahtkda7f0ufs98g!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '我的私藏配方给你们～巧克力奶冻'
    },
    {
      nickName: 'cherry baby',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo30naf54j160704a7mekms59t4cfbmm30',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/b89acb18b5a4d251e9ee9333e29a3be0/1000g0082k5kmtemj80004a7mekms59t4s7uld2o!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '絕美餐廳推介📸｜露天玻璃屋｜神秘花園🌷'
    },
    {
      nickName: '边角料',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/60181b82000000000100680a.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/e100b567b728b8f4b7085bf9cd518a88/1000g0082k8elq7qja0005o0o3e108q0aql10f5g!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '麻辣烫加辣吗 '
    },
    {
      nickName: '短澤雅美',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/61d596ca7f97b8de68b6e6ea.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/eacd04e698e6fa273f488ad40d81fa25/1000g0082k4fdo7mj20005njbisdg8t4urbc7a08!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '札幌生活｜🥟🍺📺'
    },
    {
      nickName: '馋嘴美芽',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/61e3f64342ea00a1d2e065fd.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/a0a3d0efd083517b4a2e1e0cdb67577f/1000g0082jasgqm0iu00044sdvu9rvha3isp2hm8!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '如果只能选一个！ '
    },
    {
      nickName: '洛日Sunset.',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/1000g2jo2pni700ek80005nks1730940ao9q8ck0',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/5583cde05158dfab17c13b4485a96c43/1000g0082kevvsvsjc0005nks1730940avrqf7qg!nc_n_webp_prv_1',
      likedCount: '1千+',
      displayTitle: 'Sunset.丨🖤💗'
    },
    {
      nickName: '吃货渣渣辉',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/63fa65e4c04ea1143dd05196.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/8dacefef5a3b2219f09572907b43e13e/1000g0082kkdmjhmii0105ndmvh1081timcteee8!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '澳门康公夜市必吃的10款美食攻略，记得收藏'
    },
    {
      nickName: '梅白说',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/63f8a08648fe215887373d17.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/837a423593025c87eb4801fcf2277cf1/1000g0082kcscjdsii00049r5mgmkualaf4tpnno!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '这个博主没骗人！做好的脆梅口感绝了！！'
    },
    {
      nickName: '广厦食思书屋',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/64bc74ae16d44a0001e2d431.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/f221c3665d89664097fa10d6c2538d0e/1000g0082l676en8j406g4busucc8vr5jjmla1ho!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '配方分享-仿真🍓草莓！'
    },
    {
      nickName: 'iiimogen',
      avatar: 'https://sns-avatar-qc.xhscdn.com/avatar/62e1560cbfd144a5cb45ca67.jpg',
      cover: 'http://sns-webpic-qc.xhscdn.com/202408191042/b8d0dd425b27219eac84ef3f51a7f4a5/1000g0082ksn7pkoja00g5ncnf7t08jdcnm6nmoo!nc_n_webp_prv_1',
      likedCount: '10+',
      displayTitle: '呼吸新鲜空气 '
    }
  ]

  build() {
    Column() {
      //顶部
      Image($r('app.media.ic_xhs_top'))
        .width('100%')

      //瀑布流卡片
      WaterFlow() {
        // 循环遍历数组
        ForEach(this.list,(item:WaterFlowItem)=>{
          FlowItem() {
            Column() {
              Image(item.cover) //大图片
                .width('100%')
                .backgroundColor(Color.Gray)
              Column({ space: 10 }) {
                Text(item.displayTitle) // 标题
                  .maxLines(2)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })//超过2行显示省略号
                Row() {
                  Row({ space: 5 }) {
                    Image(item.avatar)//头像图片
                      .width(20)
                      .borderRadius(10)
                    Text(item.nickName) //名字
                      .fontSize(12)
                  }
                  Row({ space: 5 }) {
                    Image($r('app.media.ic_public_favor')) // 心形图标
                      .width(15)
                      .fillColor(Color.Gray)

                    Text(item.likedCount) //点赞
                      .fontColor(Color.Gray)
                      .fontSize(12)
                  }
                }
                .width('100%')
                .justifyContent(FlexAlign.SpaceBetween)
              }
              .padding(10)
            }
            .borderRadius(5)
            .clip(true)
          }
          .backgroundColor(Color.White)
        })
      }
      .edgeEffect(EdgeEffect.Spring) //边缘弹簧效果
      .backgroundColor('#f3f3f3')
      .rowsGap(5)
      .columnsGap(5)
      .columnsTemplate('1fr 1fr')
      .padding(5)
      .layoutWeight(1)

      //底部
      Image($r('app.media.ic_xhs_bottom'))
        .width('100%')
    }
  }
}