MainAxisAlignment.space甚至不起作用

Question

我试图对齐按钮，这是结果。我正在尝试使用MainAxisAlignment.SpaceEvenly来获得3个按钮（向左，向下，向右）均匀地间隔，但是一些如何仍然保持在一起。有人可以为我指出这背后的问题以及如何实现我想要的结果吗？

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

将按钮的子级小部件放在容器中，这在类似情况下对我有用

Answer 2

如果我确实了解您的需求，那么您可以有多种选择。

您可以在外部行中扩展第一列，但是这样可以使第二列都位于右侧（我想这里需要填充）。

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")
          ),
        ],
      ),
    ],
  ),