为什么ElevatedButton被拉伸以适应屏幕的宽度

Question

这是屏幕部分的完整代码：

ListView(children: [
ClipRect(
child: Image.asset(
'images/icon.png',
scale: 2,
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: TextField(
controller: _word,
textAlign: TextAlign.center,
decoration: InputDecoration(
filled: true,
helperText: 'Enter a word',
),
),
),
Padding(
padding: const EdgeInsets.only(top: 20, left: 24, right: 24, bottom: 8),
child: ElevatedButton(
child: Text("Search!"),
onPressed: () async {
String word = _word.text;
_word.text = '';
Navigator.push(context, MaterialPageRoute(builder: (context) {
return word == '' ? RandomResults() : Results(word);
}));
}),
),
]),

然而，结果看起来是这样的：图像

我试过使用MaterialButton而不是ElevatedButton，但它也被拖动以适应屏幕的宽度。

我想把这个按钮做得足够大，可以放进里面的文字。

Answer 1

用Center包裹按钮(如果您想以不同的方式定位，也可以用Align包裹)

@override
Widget build(BuildContext context) {
return ListView(
children: [
Center(
child: ElevatedButton(
onPressed: () {},
child: Text('Search!'),
),
),
],
);
}

Answer 2

用row包装

Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
child: Text("Search!"),
onPressed: () async {
// String word = _word.text;
// _word.text = '';
// Navigator.push(context, MaterialPageRoute(builder: (context) {
//   return word == '' ? RandomResults() : Results(word);
// },),);
}),
],
),
```

Answer 3

将按钮包裹在一个大小的盒子中，并赋予其所需的宽度：

SizedBox(width: MediaQuery.of(context).size.width * 0.50), 
child: ElevatedButton(....)

这将使其宽度为屏幕的50%，您可以通过更改0.50比例来更改此宽度。