解释:
我定义了一个标准的 appBar、FlatButton 和 textField。我想让所有元素都具有相同的宽度并垂直对齐。
默认 appBar 和 TextField 具有相同的宽度但不是我的按钮。那么,如何让按钮与其他元素具有相同的宽度呢?
代码:
import 'package:flutter/material.dart';
/// Styles
class Homepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Test", style: TextStyle(color: Colors.white)),
centerTitle: true,
backgroundColor: Colors.black,
),
body: Stack(children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: SingleChildScrollView(
child: Container(
child: Center(
child: Column(
children: <Widget>[
SizedBox(
height: 50,
),
new ButtonTheme(
//minWidth: 300,
child: FlatButton(
color: Colors.black,
child: Text('Play', style: TextStyle(fontSize: 18, color: Colors.white)),
onPressed: () {
// Perform some action
},
),
),
SizedBox(
height: 50,
),
new ListTile(
leading: const Icon(Icons.person),
title: new TextField(
decoration: new InputDecoration(
hintText: "Name Player 1",
),
),
),
],
),
),
),
),
),
]),
);
}
}
最佳答案
使用无限宽度的 SizedBox
让您的 FlatButton
填充水平空间,然后将其包裹在 Padding
(AppBar
填充为 16):
Padding(
padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 16),
child: SizedBox(
width: double.infinity,
child: FlatButton(
onPressed: null,
child: Text('Play'),
),
),
);
关于flutter - 如何拥有与appbar宽度相同的按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56175656/