以网格为中心的 Flutter 布局

Question

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

我已将居中网格实施为

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

但是剩下的元素怎么放呢？我考虑过使用 Stack() 但认为这不是最佳解决方案。或者我应该使用 Row() 小部件来执行此操作，如果是这样，我如何将行的第二个子项居中对齐？

感谢您的帮助！

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

Answer 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'),
      ]),
    ));

Answer 2

有一个很简单的方法。

只需设置 shrinkWrap: true 即可使 GridView 取最小值 space 并用 Center 小部件包裹 GridView。

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

以网格为中心的 Flutter 布局

Flutter layout with grid at center

layout

gridview

dart

flutter