SideBarContainer 与瀑布流容器WaterFlow

SideBarContainer

说明

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

 SideBarContainer(SideBarContainerType.Overlay) {
      Column() {
        // 子组件 1：侧边栏
      }
      Column() {
        // 子组件 2：内容区域
      }
    }
    .showSideBar(false) // 默认隐藏

多用与各大软件的个人信息一类

属性

详解

.showSideBar($$this.status) // true，false 默认隐藏

.showControlButton(true) // true：显示控制按钮（默认） false：不显示控制按钮

.sideBarWidth(350) // 设置侧边栏的宽度，默认值：240vp，超出minSideBarWidth和maxSideBarWidth设定的范围后该值无效

.sideBarPosition(SideBarPosition.End) //设置侧边栏显示位置。 默认值：SideBarPosition.Start

.minSideBarWidth(100) // 设置侧边栏最小宽度 默认值：240vp

.maxSideBarWidth(300) // 设置侧边栏最大宽度 默认值：280vp

参数

@Entry
@Component
struct SideBarContainer01 {
  build() {
    SideBarContainer(SideBarContainerType.Overlay) {
      Column() {
        // 子组件 1：侧边容器
      }
      .backgroundColor(Color.Orange)


      Column() {
        // 子组件 2：内容区域
      }
      .backgroundColor(Color.Pink)

    }
    .showSideBar(false) // 默认隐藏
  }
}

一个案列

@Entry
@Component
struct SiderBar01 {
                           /////设置侧边栏的状态变量
  @State isShow: boolean = false

  build() {
                           // ////容器组件
                      // SideBarContainerType.Overlay 侧边栏 会盖住
                        // SideBarContainerType.Embed 侧边栏 挤压内容
    SideBarContainer(SideBarContainerType.Embed) {
      // 藏起来的侧边栏
      Row() {
      button（'关闭'）
     
      }
      .backgroundColor('rgba(0,0,0,0.5)')

      // 内容
      Column() {
        // Image($r('app.media.ic_douban_main'))
        Button('点我显示')
          .onClick(() => {
            this.isShow = true
          })
      }
    }
    .showControlButton(false) // 控制按钮显示 true / false
   
    .showSideBar($$this.isShow)  // $$this.isShow  是否显示 true/ false
    .sideBarPosition(SideBarPosition.End) // 设置位置  End 末尾 /Start 开头
    .sideBarWidth('100%') // 侧边栏 宽度
    .onChange((show: boolean) => {
      // 侧边切换显示状态时触发，true 显示，false 隐藏
      console.log('show:', show)
      this.isShow = show
    })
  }
}

瀑布流容器WaterFlow

说明：

瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局，比如

语法

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

参数

属性

举例

@Entry
@Component
struct waterFlowDemo {
 list: string[] = Array.from({ length: 30 })

      //// // 获取随机高度
 getRandomNumber() {
   return Math.floor(Math.random() * (300 - 200 + 1)) + 200;
 }

    ///// // 随机颜色
 getRandomColor(): ResourceColor {
   const r = Math.floor(Math.random() * 256);
   const g = Math.floor(Math.random() * 256);
   const b = Math.floor(Math.random() * 256);
   return `rgba(${r}, ${g}, ${b}, 0.5)`;
 }

 build() {
   WaterFlow({ footer: this.loadMore() }) {
     ForEach(this.list, (item: string, index: number) => {
       FlowItem() {
       }
       .width('100%')
       .height(this.getRandomNumber())
       .backgroundColor(this.getRandomColor())
     })
   }
   .rowsGap(10)
   .columnsGap(10)
   .columnsTemplate('1fr 1fr')
 }

 @Builder
 loadMore() {
   Text('加载更多')
     .width('100%')
     .fontSize(30)
     .fontColor(Color.White)
     .backgroundColor(Color.Pink)
 }
}