MainAxisAlignment.spaceEvenly不工作

Question

我试图对齐按钮，这里是结果。我想一开始的3个按键（左，下，右），以空间均匀地使用MainAxisAlignment.SpaceEvenly，但一些如何，他们仍然粘连在一起。有人能指出我这背后的问题，以及如何实现我想要的结果？

Here is the result

new Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
 // 4 Buttons on left side
        new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
// Up button
            new Row(
              children: <Widget>[
                MovingButton( 
                  name: new Text("Up"), 
                  channel: this.channel,
                ),
              ],
            ),
// 3 buttons that stick and needed to be space evenly
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                MovingButton( 
                  name: new Text("Left"), 
                  channel: this.channel,
                ),
                MovingButton( 
                  name: new Text("Down"), 
                  channel: this.channel,
                ),
                MovingButton( 
                  name: new Text("Right"), 
                  channel: this.channel,
                ),
              ],
            ),
          ],
        ),

// attack button
        new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            MovingButton( 
              name: new Text("Attack"), 
              channel: this.channel,
            ),
          ],
        ),
      ],
    ),

Answer 1

那么，如果我没有理解你需要什么，你有多种选择。

您可以扩展外排内的第一列，但这样一来，你有前人的精力第二列的所有的权利（你在这里需要一些填充我猜）。

new Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      // 4 Buttons on left side
      Expanded(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            // Up button
            new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: new Text("Up"),
                ),
              ],
            ),
            // 3 buttons that stick and needed to be space evenly
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                RaisedButton(
                  child: new Text("left"),
                ),
                RaisedButton(
                  child: new Text("Down"),
                ),
                RaisedButton(child: new Text("Right")),
              ],
            ),
          ],
        ),
      ),

      // attack button
      new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(child: new Text("Attack")),
        ],
      ),
    ],
  ),

我建议你使用Flutter Outline面板有渲染树的线索。

这是不扩大第一列你的实际情况：

或者你可以简单地padding添加到您的按钮（用RaiseButton，而不是您的自定义MovingButton的测试，但你用你的MovingButton代替）

new Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      // 4 Buttons on left side
      new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          // Up button
          new Row(
            children: <Widget>[
              RaisedButton(
                child: new Text("Up"),
              ),
            ],
          ),
          // 3 buttons that stick and needed to be space evenly
          new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 2),
                child: RaisedButton(
                  child: new Text("left"),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 2),
                child: RaisedButton(
                  child: new Text("Down"),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 2),
                child: RaisedButton(
                  child: new Text("Right")
                ),
              ),
            ],
          ),
        ],
      ),

      // attack button
      new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(
            child: new Text("Attack")
          ),
        ],
      ),
    ],
  ),

或使用ButtonBar代替Row小部件，并添加一个主题为所有的按钮。

new Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      // 4 Buttons on left side
      new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          // Up button
          new Row(
            children: <Widget>[
              RaisedButton(
                child: new Text("Up"),
              ),
            ],
          ),
          // 3 buttons that stick and needed to be space evenly
          new ButtonTheme(
            padding: EdgeInsets.symmetric(vertical: 0, horizontal: 8),
            child: new ButtonBar(
              children: <Widget>[
                RaisedButton(
                  child: new Text("left"),
                ),
                RaisedButton(
                  child: new Text("Down"),
                ),
                RaisedButton(
                  child: new Text("Right")
                ),
              ],
            ),
          ),
        ],
      ),

      // attack button
      new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(
            child: new Text("Attack")
          ),
        ],
      ),
    ],
  ),

Answer 2

把你的按钮的孩子小部件行容器内，这个工作对我来说在类似案件中