Question

我想用徽标和按钮进行负责任的布局。

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

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

可以通过“展开并对齐”来实现：

enter code here

 apiUpdate: '*********/*****/update';

   public update-client(data: Client) {
   console.log("client: ",data);
  const httpOptions = {
    headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
     };

    // let options = new HttpRequestOptions({ headers: headers });


   console.log("service");
     return this.http.put(this.apiUpdate, data, httpOptions);
  }

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

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

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

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

是否可以使版式在这三个变体之间自动切换？

Answer 1

enter image description here

@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)),                      
                ),
              ),
            ]    
          ),    
      ),    
  );
}

响应式列，中间和底部带有子级

1 个答案: