StaggeredLayout QML Type

一个自定义的布局管理器，用于创建错落有致的网格布局。. More...

Import Statement: import FluentUI.Controls 1.0

List of all members, including inherited members

Properties

colSpacing : int
delegate : Component
itemWidth : int
model : var
rowSpacing : int

Methods

void clear()

Detailed Description

`StaggeredLayout` 组件是一种自定义布局管理器，用于在水平网格中以错落的方式排列项。它通过计算每个项的位置，以创建具有不同行高的列布局，类似于瀑布流布局的效果。

示例用法：

 StaggeredLayout {
  itemWidth: 150
  rowSpacing: 10
  colSpacing: 10
  Repeater {
      model: someModel
      delegate: Item {
          width: 150
          height: Math.random() * 100 + 50 // 随机高度
          Rectangle {
              width: parent.width
              height: parent.height
              color: "lightblue"
          }
      }
  }
 }

Property Documentation

colSpacing : int

布局中列之间的间距。默认值为 8。

delegate : Component

布局项的委托组件。该属性与 `Repeater` 组件的 `delegate` 属性绑定。

itemWidth : int

布局中每个项的宽度。默认值为 200。

model : var

数据模型，用于提供布局项的数据。该属性与 `Repeater` 组件的 `model` 属性绑定。

rowSpacing : int

布局中行之间的间距。默认值为 8。

Method Documentation

void clear()

清除布局中的所有项并重置布局的状态。调用此方法会将 `maxHeight`、`colsHeightArr` 和 `itemsInRep` 属性重置为空，并清空数据模型。