flutter - 在Flutter中制作2x2网格

Question

我正在尝试创建一个2x2网格以在卡片中显示一些信息。免责声明:我对Dart和Flutter完全陌生，所以请在这里对这个话题有很多无知。
这些卡应具有固定的大小，图像，显示一些文字...，并应从左到右，从上到下放置。
首先，我尝试使用Flex小部件，但它似乎只能水平或垂直工作。因此，我唯一的解决方案是使用两个Flex，但是仅在元素数量大于2(仅使用一行)时显示第二个Flex。
然后，我尝试使用GridView，但是它无法以任何可能的方式工作。我从互联网上复制并粘贴到哪个示例开始测试都没关系:除非它们是应用程序中唯一显示的东西，否则它们不会显示在屏幕上，而没有任何其他小部件。我仍然不明白为什么会这样。
这是我当前的代码:
“home_page.dart”中的第一个小部件:

return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(padding: EdgeInsets.only(top: 30)),
            Text(
              'App test',
              style: TextStyle(fontSize: 24),
            ),
            EventsList(key: new Key('test')),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

“EventList”部分是一个小部件，应代表我之前解释的网格功能。此类从服务(当前仅从Future发送一些硬编码的信息)中获取一些信息，并将给定的小部件(基本上是“Card”项)绘制到EventList View 中:

class _EventsListState extends State<EventsList> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Event>>(
        future: new EventsService().getEventsForCoords(),
        builder: (context, AsyncSnapshot<List<Event>> snapshot) {
          if (snapshot.hasData) {
            return Padding(
                padding: EdgeInsets.only(left: 20, right: 20),
                child: Flex(
                  direction: Axis.horizontal,
                  verticalDirection: VerticalDirection.down,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: generateProximityEventCards(snapshot.data),
                ));
          } else {
            return CircularProgressIndicator();
          }
        });
  }

  List<Card> generateProximityEventCards(List<Event> eventList) {
    // Load Events from API
    print(eventList);

    // Render each card
    return eventList.map((Event ev) {
      return Card(
          child: Padding(
        padding: EdgeInsets.only(bottom: 15),
        child: Column(
          children: <Widget>[
            Image(
              fit: BoxFit.cover,
              image: ev.imageUrl,
              height: 100,
              width: 150,
            ),
            Padding(
              child: Text(ev.name),
              padding: EdgeInsets.only(left: 10, right: 10),
            ),
            Padding(
              child: Text(ev.address),
              padding: EdgeInsets.only(left: 10, right: 10),
            ),
          ],
        ),
      ));
    }).toList();
  }
}

当前是这样的:

如前所述，我知道Flex窗口小部件无法真正获得我想要的2x2网格外观，就像这样(用Paint完成):

因此，一些问题:

如何获得像这样的网格？请记住，我想在其下添加更多内容，因此它既不能是“无限”网格，也不能是完整的窗口网格。

是否可以在该网格的容器中向右滚动一些？因此，如果有四个以上的元素，则只需用手指向右滚动即可找到其他元素。

如您在第一个图像中看到的，第二个示例大于第一个示例。如何限制卡的大小？

非常感谢您的帮助!

Answer 1

gridview无法正常工作的原因是，您需要将GridView的shrinkWrap属性设置为true，以使其占用尽可能少的空间。 (默认情况下，诸如gridview和listview之类的可滚动小部件会占用尽可能多的垂直空间，如果将其放在列小部件中，则会出现错误)
尝试像这样使用可滚动的GridView.count小部件，并将rinkleWrap设置为true:

...

GridView.count(
  primary: false,
  padding: /* You can add padding: */ You can add padding const EdgeInsets.all(20),
  crossAxisCount: /* This makes it 2x2: */ 2,
  shrinkWrap: true,
  children: generateProximityEventCards(snapshot.data),

...