Flutter混合布局-带有行的网格 [英] Flutter Mixed Layout - Grid with Rows

问题描述

我正在尝试创建一个基本的Flutter应用，该应用具有2 x 2的文本输入框&它下方的一个按钮.

I'm trying to create a basic Flutter app that has a a 2 by 2 grid of text inputs & a button below it.

最初，我只是拥有&没有按钮，没有问题:

Initially, I just had the grid & no buttons with no problems:

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
               ]

我需要脚手架内部的GridView才能将脚手架用于快餐栏.

I need the GridView inside the Scaffold to be able to use the Scaffold for the snackbar.

现在，我想在此网格下方添加一个按钮.为此，我在&之间添加了几层我收到无穷溢出"的错误，其逻辑如下:

Now I want to add a button below this grid. And to achieve this I've added a couple of layers in between & I'm getting a "overflowed by infinity" error with the following logic:

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
               ]

代码&堆栈跟踪.

问题似乎源于列"部分.似乎我需要为色谱柱"或脚手架"提供一些尺寸，但是我似乎无法弄清缺少的参数.

The problem seems to be stemming from the "Column" part. Seems like I need to provide some sizing to either the Column or the Scaffold but I can't seem to be able to figure out what parameters I'm missing.

在SO或Flutter文档上找不到我可以遵循的示例的任何东西-或我完全错过了它.

I couldn't find anything on SO or the Flutter docs that have an example that I could follow - or I'm completely missing it.

将感谢您对此布局进行排序的所有指针.

Would appreciate any pointers to get this layout sorted.

推荐答案

感谢Flutter Gitter的帮助，感谢@xqwzts&@ahmadzein.

Got help from Flutter Gitter, thanks to @xqwzts & @ahmadzein.

解决方案是将每个孩子都用扩展"包装

The solution was to wrap each child in "Expanded"

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
               ]

这篇关于Flutter混合布局-带有行的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！