ElevatedButton 占据全宽答案

【问题标题】：ElevatedButton Takes Full WidthElevatedButton 占据全宽
【发布时间】：2022-01-25 03:32:58
【问题描述】：

老实说，我是 Flutter 和开发的新手。我一直在尝试让每个按钮在点击时改变颜色；它确实有效，但我遇到的问题是按钮占用了所有水平空间。我尝试并寻找可行的方法。有没有办法改变宽度？

class Home extends StatefulWidget {
      @override
      State<Home> createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> {
      List<bool> isSelected = [false, false, false, false];
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            backgroundColor: Colors.grey[850],
            appBar: AppBar(
              title: Text(
                "A Sample Quiz",
                style: TextStyle(
                  letterSpacing: 1.3,
                  fontFamily: "SourceCodePro",
                ),
              ),
              centerTitle: true,
              backgroundColor: Colors.grey[900],
              elevation: 2.0,
            ),
            body: Center(
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: 20.0,
                  ),
                  Text(
                    "Choose all that apply:",
                    style: TextStyle(
                      fontFamily: "NotoSans",
                      letterSpacing: 1.2,
                      fontSize: 18.0,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    height: 9.0,
                  ),
                  answerButtonBoxes("Answer"),
                ],
              ),
            ),
          ),
        );
      }
    
      Column answerButtonBoxes(String label) {
        return Column(
          children: [
            ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: isSelected.length,
                itemBuilder: (BuildContext context, int index) {
                  return ElevatedButton(
                      onPressed: () {
                        setState(() => isSelected[index] = !isSelected[index]);
                      },
                      child: Text(
                        "$label ${index + 1}",
                        style: TextStyle(fontFamily: "NotoSans", fontSize: 15.0),
                      ),
                      style: ElevatedButton.styleFrom(
                        primary:
                            isSelected[index] ? Colors.blue : Colors.transparent,
                        elevation: 0.0,
                        side: BorderSide(
                          color: Colors.white,
                          width: isSelected[index] ? 0 : 1,
                          style: isSelected[index]
                              ? BorderStyle.none
                              : BorderStyle.solid,
                        ),
                      ),
                  );
                }),
          ],
        );
      }
    }

【问题讨论】：

固定宽度的按钮是否需要根据文字的宽度？
@Diwyansh 我不需要特定的宽度，但我不希望它与页面一样宽。
检查我的答案一次。

标签： flutter button flutter-layout

【解决方案1】：

尝试下面的代码并设置按钮的fixedSize。

参考ElevatedButtonhere

   ElevatedButton(
          style: ElevatedButton.styleFrom(
            fixedSize: const Size(
              200,
              50,
            ),
          ),
          onPressed: () {
            print('Button Presssed');
            // add your onPressed function here
          },
          child: const Text(
            'Button',
          ),
        ),

您的结果屏幕->

【讨论】：

不知道我们可以添加固定大小；非常感谢！
如果我的回答解决了您的问题，请接受并支持我的回答。谢谢
我是新来的，所以它说我需要声望才能这样做，但我的请求已被反馈。
只需点击答案上的复选图标即可参考this
其实，虽然我改了代码和width参数，但横向还是占满了所有空间。

【解决方案2】：

你可以像这样用Padding重构Elevated Button，

Padding(
      padding: const EdgeInsets.symmetric(horizontal: 40.0),
      child: ElevatedButton();

【讨论】：

我尝试了其他小部件，如 sizedbox 和扩展，但不知道这可以工作；谢谢！

【解决方案3】：

您阻止您的 button 获取 expanded 您可以将您的 ElevatedButton 扭曲到 Center 小部件然后您不必 assign 特定 width到你的按钮

ListView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemCount: isSelected.length,
            itemBuilder: (BuildContext context, int index) {
              return Center(
                child: ElevatedButton(
                  onPressed: () {
                    setState(() => isSelected[index] = !isSelected[index]);
                  },
                  child: Text(
                    "$label ${index + 1}",
                    style:
                        TextStyle(fontFamily: "NotoSans", fontSize: 15.0),
                  ),
                  style: ElevatedButton.styleFrom(
                    primary: isSelected[index]
                        ? Colors.blue
                        : Colors.transparent,
                    elevation: 0.0,
                    side: BorderSide(
                      color: Colors.white,
                      width: isSelected[index] ? 0 : 1,
                      style: isSelected[index]
                          ? BorderStyle.none
                          : BorderStyle.solid,
                    ),
                  ),
                ),
              );
            })

【讨论】：

在 ElevatedButton 中将它与 fixedSize 一起使用也允许我指定大小。谢谢！