为什么 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);
          }));
        }),
  ),
]),

然而结果是这样的： image

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

我想让按钮大到足以容纳其中的文本。

Answer 1

用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 2

将您的按钮包裹在一个大小合适的盒子中，并为其指定您想要的宽度：

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

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

Answer 3

用 Center 包裹按钮（如果你想以不同的方式放置它，也可以用 Align 包裹）

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

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

Why is ElevatedButton getting stretched to fit the width of the screen?

flutter

flutter-layout

cross-platform