Question

我正在尝试创建一个Flutter布局，在屏幕中央有6x6方桌（网格），网格上方/下方有一些元素。这样做的最佳方法是什么？

我已将中心网格实现为

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

但如何放置其余元素？我想过使用Stack（）但是我认为这不是最好的解决方案。或者我应该使用Row（）小部件来执行此操作，如果是这样，我如何将该行的第二个子节点对齐？

感谢您的帮助！

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

Answer 1

有一个非常简单的方法。

只需设置shrinkWrap: true，即可使GridView占用最小的空间，并用GridView小部件包装Center。

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

Answer 2

这就是我使用“列”小部件在网格上方和下方对齐元素，并展开以在“列”小部件中使网格可见的方式：

  @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 个答案: