Flutter 中的 GridView.custom 和 GridView.extent 小部件布局有什么区别？答案

【问题标题】：What is the difference between the GrideView.custom & GrideView.extent widget layout in flutter?Flutter 中的 GridView.custom 和 GridView.extent 小部件布局有什么区别？
【发布时间】：2021-01-28 14:50:18
【问题描述】：

flutter中GridView.custom&GridView.extent小部件布局有什么区别？

如果您回答了这个问题，请附上示例代码和清晰的解释。

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

GridView.extent

 @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text('Grid'),
      ),
      body: Container(
        child: GridView.extent(
          maxCrossAxisExtent: width / 3,
          children: List.generate(
            20,
            (index) => Container(
              color: Colors.amber,
              margin: const EdgeInsets.all(5),
              alignment: Alignment.center,
              child: Text('Widget : $index'),
            ),
          ),
        ),
      ),
    );
  }

在GridView.extent 中，我们使用maxCrossAxisExtent 来设置我们希望为每个children 分配的最大空间。这里我们给了一个maxCrossAxisExtent: width / 3，这意味着我们给每个孩子1/3的可用宽度。

GridView.custom

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grid'),
      ),
      body: Container(
        child: GridView.custom(
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          childrenDelegate: SliverChildBuilderDelegate(
            (context, index) {
              return Container(
                color: Colors.amber,
                margin: const EdgeInsets.all(5),
                alignment: Alignment.center,
                child: Text('Widget $index'),
              );
            },
            childCount: 200,
          ),
        ),
      ),
    );
  }

在GridView.custom 中，我们可以选择使用SliverGridDelegate gridDelegate and SliverChildDelegate childrenDelegate。

对于SliverGridDelegate，您可以使用：

SliverGridDelegateWithFixedCrossAxisCount - 交叉轴上的子节点数
SliverGridDelegateWithMaxCrossAxisExtent - 每个孩子的最大交叉轴空间（与我们使用 GridView.extent 所做的相同）

对于SliverChildDelegate，您可以使用：

SliverChildBuilderDelegate - 提供构建器回调来构造子节点
SliverChildListDelegate - 提供明确列出子项的选项。

上面的两个代码生成相同的输出。Grid.extent 只是创建具有固定子大小的网格布局的简写，而我们可以使用 GridView.custom 做同样的事情，因为它更灵活，你可以用它做更多的事情。

【讨论】：