Flutter GridView组件

Flutter GridView组件

基本属性

scrollDirection：GridView滚动方向。

gridDelegate：
		- SliverGridDelegateWithFixedCrossAxisCount：交叉轴上的子元素固定数量。
		- SliverGridDelegateWithMaxCrossAxisExtent：交叉轴方向尽可能大。

SliverGridDelegateWithFixedCrossAxisCount属性：

	- crossAxisCount：横轴的子元素的数量。

	- mainAxisSpacing：主轴方向的间距。

	- crossAxisSpacing：横轴方向的间距。

	- childAspectRatio：子元素的宽高比。

简单使用

这种方式适合少量数据。

GridView(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 2,
        crossAxisSpacing: 2,
        childAspectRatio: 2,
    ),
    children: [
        createItem(Colors.red.shade300),
        createItem(Colors.red.shade200),
        createItem(Colors.red.shade100),
        createItem(Colors.green.shade300),
        createItem(Colors.green.shade200),
        createItem(Colors.green.shade100),
        createItem(Colors.blue.shade300),
        createItem(Colors.blue.shade200),
        createItem(Colors.blue.shade100),
    ],
)

createItem(Color color) {
    return Container(
        color: color,
    );
}

GridView.builder

适合加载大量数据。

GridView.builder(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
    ),
    itemBuilder: (BuildContext context, int index) {
        return createItem(Colors.primaries[index % Colors.primaries.length]);
    },
    itemCount: 50,
)

GridView.count

用于快速创建GridView，等价于上面的代码。

GridView.count(
    crossAxisCount: 3,
    children: List.generate(
        50,
        (index) => createItem(Colors.primaries[index % Colors.primaries.length]),
    ),
)

GridView.extent

GridView.extent(
    maxCrossAxisExtent: 300,
    children: List.generate(
        50,
        (index) => createItem(Colors.primaries[index % Colors.primaries.length]),
    ),
)

GridView.custom

GridView.custom(
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
    ),
    childrenDelegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
            return createItem(Colors.primaries[index % Colors.primaries.length]);
        },
        childCount: 50,
    ),
)