Flutter 混合布局 - 带行的网格答案

【问题标题】：Flutter Mixed Layout - Grid with RowsFlutter 混合布局 - 带行的网格
【发布时间】：2018-07-06 23:34:43
【问题描述】：

我正在尝试创建一个基本的 Flutter 应用程序，它有一个 2 x 2 的文本输入网格和一个按钮。

最初，我只有网格，没有按钮，没有问题：

void main() => runApp(new App());
class App extends StatelessWidget {
...
  Widget build(BuildContext context) {
    return new MaterialApp(
      ...
      home: new InputWidget()
      ...
  class InputWidget extends StatefulWidget {
    Widget build(BuildContext context) {
      ... 
      _InputWidgetState createState() => new _InputWidgetState();
      ...
  class _InputWidgetState extends State<InputWidget> {
     Widget build(BuildContext context) {
       return new Scaffold(
         appBar: new AppBar(...)
         body: new Builder(
           builder: (BuildContext context) {
             return new GridView.count(
               children: <Widget>[
                 // 4 Text Fields here
               ]

我需要 Scaffold 中的 GridView 才能将 Scaffold 用于小吃店。

现在我想在这个网格下方添加一个按钮。为了实现这一点，我在两者之间添加了几层，并且出现“无限溢出”错误，其逻辑如下：

void main() => runApp(new App());
class App extends StatelessWidget {
...
  Widget build(BuildContext context) {
    return new MaterialApp(
      ...
      home: new AppContainer()
      ...
  class AppContainer extends StatelessWidget {
    Widget build(BuildCOntext context) {
      return new Material( // tried Container as well
        child: new Column(
          children: <Widget>[
            new InputWidget()
            new BUttonWidget()
        ...
  class ButtonWidget extends StatelessWidget {
    Widget build(BuildContext context) {
      return new Container(
        child: new MaterialButton(...)
  ...
  class InputWidget extends StatefulWidget {
    Widget build(BuildContext context) {
      ... 
      _InputWidgetState createState() => new _InputWidgetState();
      ...
  class _InputWidgetState extends State<InputWidget> {
     Widget build(BuildContext context) {
       return new Scaffold(
         appBar: new AppBar(...)
         body: new Builder(
           builder: (BuildContext context) {
             return new GridView.count(
               children: <Widget>[
                 // 4 Text Fields here
               ]

Code & Stack Trace.

问题似乎源于“列”部分。似乎我需要为 Column 或 Scaffold 提供一些尺寸，但我似乎无法弄清楚我缺少哪些参数。

我在 SO 或 Flutter 文档中找不到任何可以遵循的示例 - 或者我完全错过了它。

如果有任何指针可以对此布局进行排序，我们将不胜感激。

【问题讨论】：

标签： gridview layout dart flutter

【解决方案1】：

从 Flutter Gitter 获得帮助，感谢 @xqwzts 和 @ahmadzein。

解决方案是将每个孩子包装在“扩展”中

void main() => runApp(new App());
class App extends StatelessWidget {
...
  Widget build(BuildContext context) {
    return new MaterialApp(
      ...
      home: new AppContainer()
      ...
  class AppContainer extends StatelessWidget {
    Widget build(BuildCOntext context) {
      return new Material( // tried Container as well
        child: new Column(
          children: <Widget>[
            new Expanded (
              child: new InputWidget() ... ),
            new Expanded (
              child: new Row ( 
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[new ButtonWidget()] ... )
        ...
  class ButtonWidget extends StatelessWidget {
    Widget build(BuildContext context) {
      return new Container(
        child: new MaterialButton(...)
  ...
  class InputWidget extends StatefulWidget {
    Widget build(BuildContext context) {
      ... 
      _InputWidgetState createState() => new _InputWidgetState();
      ...
  class _InputWidgetState extends State<InputWidget> {
     Widget build(BuildContext context) {
       return new Scaffold(
         appBar: new AppBar(...)
         body: new Builder(
           builder: (BuildContext context) {
             return new GridView.count(
               children: <Widget>[
                 // 4 Text Fields here
               ]

【讨论】：