在 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 发送一些硬编码信息），并将给定的小部件（基本上是“卡”项）绘制到 EventList 视图中：

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 完成）：

那么，一些问题：

1. 我怎样才能让这样的网格工作？请记住，我希望在其下方有更多内容，因此它不能是“无限”网格，也不能是完整的窗口网格。
2. 是否可以在该网格的容器中执行一些向右滚动的操作？因此，如果元素超过 4 个，我只需用手指向右滚动即可找到其他元素。
3. 正如您在第一张图片中看到的，第二个示例比第一个示例大。如何限制卡片的大小？

非常感谢您的帮助！

Answer 1

gridview 无法工作的原因是因为您需要将 theGridView 的 ShrinkWrap 属性设置为 true，以使其占用尽可能少的空间。（默认情况下，像 gridview 和 listview 这样的可滚动小部件会占用尽可能多的垂直空间，如果将其放入列小部件中，则会出现错误）

尝试使用GridView.count像这样的可滚动小部件并将shrinkWrap设置为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),

...