我想用徽标和按钮进行负责任的布局。
默认情况下,我想将徽标居中并在底部放置按钮,如下所示:
注意:徽标位于整个布局的中心,而不位于按钮上方的空间中心
可以通过“展开并对齐”来实现:
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,
],
)
是否可以使版式在这三个变体之间自动切换?
答案 0 :(得分:-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)),
),
),
]
),
),
);
}