如何告诉GridView Builder只需采取必要的高度？

Question

是否可以制作一个gridview.builder占据孩子的高度，而不是指定父母的一定身高？

我有一个gridview.builder，应该放置列表的内容。我遇到了一个错误，因为我没有在父容器上指定高度，但是我希望GridView仅采用最小的必要高度，因此孩子们适合。

这是我的GridView：

return SizedBox(
      // height: 400,
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          childAspectRatio: MediaQuery.of(ctx).size.width /
              (MediaQuery.of(ctx).size.height / 4),
          crossAxisCount: MediaQuery
              .of(ctx)
              .size
              .width > 600 ? 3 : 1,
        ),
        itemCount: content.length,
        itemBuilder: (BuildContext ctx, index) {
          return SizedBox(
            height: 100,
            width: 300,
            child: ListTile(
              leading: content[index]["icon"],
              title: content[index]["title"],
              subtitle: Expanded(
                child: Text(
                  content[index]["text"],
                  style: const TextStyle(fontSize: 18),
                ),
              ),
            ),
          );
        },
      ),
    );

列表是这样的：

List content = [
      {"icon": ...,
        "title": ...,
        "text": ...},
      {"icon": ...,
        "title": ...,
        "text": ...},
      {"icon": ...,
        "title": ...,
        "text": ...},
      {"icon": ...,
        "title": ...,
        "text": ...},
    ];

这些是​​我的控制台上出现的一些错误：

​/I.SSTATIC.NET/QYM7J.PNG“ alt =”在此处输入图像描述“>

如果我删除sizebox包装gridview：

​具有大小，但在索引1上丢失了。我不知道这意味着什么。

有人可以帮我吗？我的疑问是非常基本的，但是如果我是做错了什么，我附上了我的代码，这是非常具体的。

先感谢您。

Answer 1

是的，Minheight＆amp; BoxConstraints内部的Maxheight属性...
由于未提及父母小部件的宽度和高度属性，您面临的错误。
有必要为ListView或GridView定义宽度和高度属性...
而不是使用Sipedbox将其更改为容器...
然后，在约束属性中，您可以定义大小。对于良好的代码标准，请始终使用最小/最大宽度和高度

示例代码：

Container(
          constraints: BoxConstraints( //below mentioned sizes for reference only
                    minWidth: 100.0,
                    maxWidth: 320.0, 
                    minHeight: 100.0,
                    maxHeight: 600.0),
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              childAspectRatio: MediaQuery.of(ctx).size.width /
                  (MediaQuery.of(ctx).size.height / 4),
              crossAxisCount: MediaQuery
                  .of(ctx)
                  .size
                  .width > 600 ? 3 : 1,
            ),
            itemCount: content.length,
            itemBuilder: (BuildContext ctx, index) {
              return SizedBox(
                height: 100,
                width: 300,
                child: ListTile(
                  leading: content[index]["icon"],
                  title: content[index]["title"],
                  subtitle: Expanded(
                    child: Text(
                      content[index]["text"],
                      style: const TextStyle(fontSize: 18),
                    ),
                  ),
                ),
              );
            },
          ),
        );

Answer 2

也许您可以将其包装在列中，并使用灵活或扩展的小部件为GridView和其他孩子设置比例。

Column(
        children: [
        Flexible(
          flex: 1,
          child: SizedBox(
            // height: 400,
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                childAspectRatio: MediaQuery.of(ctx).size.width /
                    (MediaQuery.of(ctx).size.height / 4),
                crossAxisCount:
                    MediaQuery.of(ctx).size.width > 600 ? 3 : 1,
              ),
              itemCount: content.length,
              itemBuilder: (BuildContext ctx, index) {
                return SizedBox(
                  height: 100,
                  width: 300,
                  child: ListTile(
                    leading: content[index]["icon"],
                    title: content[index]["title"],
                    subtitle: Expanded(
                      child: Text(
                        content[index]["text"],
                        style: const TextStyle(fontSize: 18),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ),//Other childs
        Flexible(
          flex: 3,
          child: SizedBox(
            child: Container(
              color: Colors.red,
            ),
          ),
        )
      ],
    ),