响应列与儿童在中心和底部

Question

我想用徽标和按钮做出负责任的布局。

默认情况下，我希望将徽标居中并将按钮放在底部，如下所示：

注意：徽标位于整个布局的中心，而不是位于按钮上方空间的中心

它可以通过Expanded和Align来实现：

Column(
  children: [
    Expanded(
      child: Container(),
    ),
    Expanded(
      child: logo,
    ),
    Expanded(
      child: Align(
        alignment: Alignment.bottomCenter,
        child: buttons,
      ),
    ),
  ],
)

然后，如果按钮不适合底部三分之一，我想减少顶部空间，以适应按钮。我可以使用带对齐的简单列来实现它：

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    logo,
    buttons,
  ],
)

毕竟，如果布局甚至不适合整个屏幕，我想启用滚动：

ListView(
  children: [
    logo,
    buttons,
  ],
)

是否可以使布局在这三种变体之间自动切换？

Answer 1

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text('App Name'),
      ),
    body:
      new Center(
        child:
          new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(child: 
              new Icon(
                Icons.insert_emoticon,
                color: const Color(0xFF000000), 
                size: 256.0),
              ),
              ButtonTheme(
                minWidth: MediaQuery.of(context).size.width,
                height: 50.0,
                child: RaisedButton(
                  onPressed: () {},
                  child: Text("Hong Kong", style: TextStyle(fontSize: 48.0)),                      
                ),
              ),
              ButtonTheme(
                minWidth: MediaQuery.of(context).size.width,
                height: 50.0,
                child: MaterialButton(
                  onPressed: () {},
                  color: Colors.pink,
                  child:  Text("New York", style: TextStyle(fontSize: 48.0)),                      
                ),
              ),
            ]    
          ),    
      ),    
  );
}