以网格为中心的颤振布局答案

【问题标题】：Flutter layout with grid at center以网格为中心的颤振布局
【发布时间】：2018-09-06 18:51:00
【问题描述】：

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

我已经将中心网格实现为

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

但是如何放置其余元素？我考虑过使用 Stack() 但认为这不是最好的解决方案。或者我应该使用 Row() 小部件来做到这一点，如果是这样，我如何将行的第二个子元素居中对齐？

感谢您的帮助！

UPD：Here's the picture of what I meant to do。我想在网格下方和上方再放置两个容器，并希望它们填满所有可用空间

【问题讨论】：

添加您想要的视觉示例。因为很难理解
你看过Stack类docs.flutter.io/flutter/widgets/Stack-class.html
是的，我做到了。但是我的小部件不会相互重叠，所以我不想使用 Stack。
我知道这个问题已经得到解答，但是请随意看看这个很棒的颤动布局指南github.com/bizz84/layout-demo-flutter我发现它非常有用

标签： gridview layout dart flutter

【解决方案1】：

这就是我如何使用 Column 小部件来对齐网格上下的元素并展开以使 Grid 在 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'),
      ]),
    ));

【讨论】：

【解决方案2】：

有一个非常简单的方法。

只需设置shrinkWrap: true，这会使GridView 占用最小空间，并用Center 小部件包裹GridView。

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

【讨论】：

谢谢，救我一命。
谢谢，shrinkWrap: true, 是我想要的。