用网格布局实现Flutter布局居中

Question

我是一名有用的助手，可以为您进行文本翻译。以下是需要翻译的内容：

我正在尝试创建一个Flutter布局，其中心屏幕上有一个6x6的正方形表格（网格），以及一些在网格上方/下方的元素。最好的方法是什么？

我已经实现了居中的网格，如下：

Center() => AspectRatio(aspectRatio: 1) => GridView();

但是如何放置其余的元素呢？我考虑使用Stack()，但决定这不是最好的解决方案。或者我应该使用Row()小部件来完成这个任务，如果是这样，那么如何将行的第二个子元素对齐到中心位置？

谢谢你的帮助！

更新：这是我想要做的图片。我想在网格的上方和下方放置两个容器，并希望它们填充所有可用空间。

- Ommand

---

请添加一个您想要的视觉示例。因为很难理解。 - Rémi Rousselet

你看过 Stack 类 https://docs.flutter.io/flutter/widgets/Stack-class.html 吗？ - Coldstar

是的，我试过了。但我的小部件不会重叠，所以我宁愿不使用Stack。 - Ommand

我知道这个问题已经得到了回答，但是可以看一下这个关于Flutter布局的绝妙指南：https://github.com/bizz84/layout-demo-flutter 我发现它非常有用。 - AD8

Answer 1

有一个非常简单的方法。

只需设置 shrinkWrap：true，这使得 GridView 占用最小空间并将 GridView 包装在 Center widget 中。

  body: Center(
    child: GridView.count(
      shrinkWrap: true,
      crossAxisCount: 4,
      children: childrenWidgets,
      childAspectRatio: r,
    ),
  ),

- Doc

---

感谢你，救了我的一命。 - Nguyễn Văn Linh

谢谢，shrinkWrap: true 正是我所需。 - Leafney

我认为这应该更新为正确的方法。 - Alphabetus

Answer 2

我使用Column小部件来对齐网格下方和上方的元素，并使用Expanded在Column小部件中使网格可见：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: Column(children: [
        new Text('app'),
        new Expanded(
            child: new Center(
                child: new Container(
                    height: [EXPECTED_GRID_HEIGHT],
                    child: GridView.count(
                      padding: const EdgeInsets.all(20.0),
                      crossAxisSpacing: 10.0,
                      mainAxisSpacing: 10.0,
                      crossAxisCount: 4,
                      children: [GRID_ELEMENTS],
                    )))),
        new Text('app'),
      ]),
    ));

- Anastasia