Flutter技术问题：如何在Container中垂直排列所有Widget

你现在遇到的核心问题很明确：你用了Row组件来排列元素，但它是专门做水平布局的，要实现类似Android垂直方向LinearLayout的效果，换成Column组件就对了。

我直接帮你修改关键的MyBar类代码，把里面的Row替换成Column，还可以根据需求调整垂直方向的对齐逻辑：

class MyBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 90.0,
      margin: new EdgeInsets.symmetric(vertical: 20.0),
      padding: new EdgeInsets.all(8.0),
      decoration: new BoxDecoration(color: Colors.blue[100]),
      // 替换Row为Column，实现垂直排列
      child: new Column(
        // 可选：设置子元素在垂直方向的对齐方式，比如顶部对齐
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          new IconButton(icon: new Icon(Icons.adjust), onPressed: null),
          new IconButton(icon: new Icon(Icons.disc_full), onPressed: null),
          new IconButton(icon: new Icon(Icons.scatter_plot), onPressed: null),
          new IconButton(icon: new Icon(Icons.delete_forever), onPressed: null),
          new Text("test")
        ],
      ),
    );
  }
}

补充说明： #

• Column就是Flutter里对应Android垂直LinearLayout的组件，核心作用就是垂直堆叠子元素；
• 如果你的Container高度固定（比如这里的90.0），可以通过mainAxisAlignment属性调整子元素的垂直分布——比如MainAxisAlignment.center让元素居中，MainAxisAlignment.spaceBetween让元素在垂直方向分散开；
• 如果后续子元素数量变多导致溢出，可以在Column外层套一个SingleChildScrollView，实现垂直滚动的效果。

你的整体布局结构（MyScaffold里的Column+Expanded）是没问题的，它能正确分配顶部栏和中间内容区域的垂直空间。

内容的提问来源于stack exchange，提问作者Farhana Naaz Ansari