MainAxisAlignment.space甚至不起作用

Question

我試圖對齊按鈕，這是結果。 我正在嘗試使用MainAxisAlignment.SpaceEvenly來獲得3個按鈕（向左，向下，向右）均勻地間隔，但是一些如何仍然保持在一起。 有人可以為我指出這背后的問題以及如何達到我想要的結果嗎？

這是結果

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