GridView在Expanded内不可见，只有在使用指定高度的Container时可见。

Question

9 浏览2023年7月20日

匿名的 2023年7月20日

0 Comments

我有一个GridView，我想在一个高度不确定的容器中显示它。然而，只有当我使用具有指定高度的容器时，GridView才会显示出来。当我将容器更改为Expanded或Flexible时，GridView会变得不可见。

有效的代码：

return Container( //使用容器


  height: 250,    //具有指定高度
  child: GridView.count(
    primary: false,
    padding: const EdgeInsets.all(0.0),
    crossAxisSpacing: 10.0,
    crossAxisCount: 2,
    children: [
      const Text('他会让你解开所有的困扰'),
      const Text('不要理会乌合之众'),
      const Text('只听到尖叫的声音'),
      const Text('那些尖叫的人'),
    ],
  ),
);

无效的代码：

return Expanded(


  child: GridView.count(
    primary: false,
    padding: const EdgeInsets.all(0.0),
    crossAxisSpacing: 10.0,
    crossAxisCount: 2,
    children: [
      const Text('他会让你解开所有的困扰'),
      const Text('不要理会乌合之众'),
      const Text('只听到尖叫的声音'),
      const Text('那些尖叫的人'),
    ],
  ),
);

0

3 答案

匿名的 · Answer 1 · 2023-09-19T00:36:05+00:00

问题原因：在GridView中设置了shrinkWrap属性为true。

解决方法：使用Container包裹GridView，并指定一个固定的高度。

在Flutter中，GridView是用于显示网格布局的控件。有时候我们会遇到一个问题，即当将GridView放在Expanded中时，GridView可能会变得不可见。解决这个问题的方法是使用Container来包裹GridView，并指定一个具体的高度。

在这个问题中，问题的根源是在GridView中设置了shrinkWrap属性为true。shrinkWrap属性的作用是根据内容的大小来确定GridView的大小。当GridView放在Expanded中时，Expanded会尝试将GridView的大小调整为适应可用空间的最大值。然而，由于shrinkWrap属性为true，GridView会根据内容的大小来确定自己的大小，这可能会导致GridView变得不可见。

为了解决这个问题，我们需要使用Container来包裹GridView，并指定一个具体的高度。通过指定一个具体的高度，我们可以确保GridView的大小不会受到shrinkWrap属性的影响，从而解决GridView在Expanded中不可见的问题。

下面是解决这个问题的代码示例：


Container(
  height: 200, // 指定一个具体的高度
  child: GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
    ),
    itemCount: 4,
    itemBuilder: (BuildContext context, int index) {
      return Container(
        color: Colors.blue,
        margin: EdgeInsets.all(10),
      );
    },
  ),
);

通过将GridView放在一个具有指定高度的Container中，我们可以确保GridView在Expanded中可见。

总结起来，当我们在使用GridView时，如果遇到GridView在Expanded中不可见的问题，我们可以通过使用Container来包裹GridView，并指定一个具体的高度来解决这个问题。

匿名的 · Answer 2 · 2023-08-03T12:44:50+00:00

GridView inside Expanded not visible, only visible when using Container with a specified height

在使用Flutter进行布局时，有时候会遇到GridView在Expanded内不可见的问题，只有在使用指定高度的Container时才可见。本文将探讨这个问题的原因以及解决方法。

问题原因：

GridView的父部件需要有一个指定的高度。如果父部件没有指定高度，GridView将无法正常显示。

解决方法：

一种解决方法是使用一个具有特定高度的Container作为GridView的父部件。可以通过设置Container的高度来解决GridView不可见的问题。例如，可以使用以下代码来指定Container的高度为屏幕的高度：

Container(


  height: MediaQuery.of(context).size.height,
  child: GridView.count(
    // GridView的其他属性
  ),
)

这样，GridView将占据整个屏幕的高度，并且可以正常显示。

然而，有时候我们并不希望GridView占据整个屏幕的高度，而是希望它在需要时可以扩展。为了实现这一点，可以尝试使用SizedBox.expand作为GridView的父部件。SizedBox.expand会自动扩展以适应可用空间。以下是使用SizedBox.expand的示例代码：

return SizedBox.expand(


  child: Container(
    child: GridView.count(
      // GridView的其他属性
    ),
  ),
);

这样，GridView将在需要时自动扩展，以适应可用空间。

当我们遇到GridView在Expanded内不可见的问题时，可以通过为GridView的父部件设置指定的高度来解决。另外，如果我们希望GridView在需要时可以自动扩展，可以尝试使用SizedBox.expand作为GridView的父部件。

参考链接：

[https://stackoverflow.com/a/48410521/8312074](https://stackoverflow.com/a/48410521/8312074)

匿名的 · Answer 3 · 2023-08-13T07:40:24+00:00

问题的出现原因：

问题是GridView控件在Expanded控件内不可见，只有在使用具有指定高度的Container控件时才可见。在给定的代码中，将GridView控件放置在Expanded控件中，但是没有将Expanded控件放置在Column控件中。

解决方法：

在给定的代码中，需要将Expanded控件放置在Column控件中，以便将可用的垂直空间传递给GridView控件。

以下是修改后的代码：

return Column(


  children: [
    Expanded(
      child: GridView.count(
        primary: false,
        padding: const EdgeInsets.all(0.0),
        crossAxisSpacing: 10.0,
        crossAxisCount: 2,
        children: [
          const Text("He'd have you all unravel at the"),
          const Text("Heed not the rabble"),
          const Text("Sound of screams but the"),
          const Text("Who scream"),
        ],
      ),
    ),
  ],

);

这样修改后，GridView控件将可见，并且可以正常显示在屏幕上。