【HarmonyOS NEXT 】应用开发：ArkTS瀑布流（无线滚动）示例一

纳米小川

于 2024-07-16 08:30:00 发布

阅读量620

点赞数 3

分类专栏： HarmonyOS 文章标签： harmonyos 华为

本文链接：https://blog.youkuaiyun.com/weixin_47351913/article/details/140348197

版权

SDK：5.0.0
DevEco Studio：5.0.3
Node.js：18.20.1

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

1、示例代码

import { WaterFlowDataSource } from './WaterFlowDataSource'

@Entry
@Component
struct Index {
  // 实现IDataSource接口的对象，用于瀑布流组件加载数据
  dataSource: WaterFlowDataSource = new WaterFlowDataSource()
  // console.log(dataSource)
  // 构建界面
  build() {
    Column({ space: 4 }) {
      WaterFlow() {
        LazyForEach(this.dataSource, (item: number) => {
          FlowItem() {
            Column() {
              Text("一行数据，编号：" + item).fontSize(12).height('26')
            }.width("100%")
            .border({
              width: { left: 1, right: 1, top: 0, bottom: 1 },
              color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
              style: {
                // left: BorderStyle.Dotted,
                // right: BorderStyle.Dotted,
                /