Question

我正在尝试在Flutter页面上建立按钮列表；我希望按钮较大，但不要与左右边缘齐平。有人可以告诉我该怎么做吗？我已经尝试过调整我可以想到的每个方面，并在Internet上仔细阅读示例，但我所能找到的并不是全宽度的示例，而不是大部分宽度的示例。

这是代码：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              const SizedBox(height: 10),
              _createButton(idx: 1, btnText: 'Button 1', btnColor: Colors.red),
              const SizedBox(height: 10),
              _createButton(
                  idx: 2, btnText: 'Button 2', btnColor: Colors.yellow),
              const SizedBox(height: 10),
              _createButton(
                  idx: 3, btnText: 'Button 3', btnColor: Colors.green),
              const SizedBox(height: 10),
              _createButton(
                idx: 0,
                btnText: 'Button 4',
                btnColor: Colors.black,
                textColor: Colors.white,
              ),
            ],
          ),
      ),
    );
  }

  Widget _createButton(
      {int idx,
      String btnText,
      Color btnColor,
      Color textColor = Colors.black}) {
    return RaisedButton(
      color: btnColor,
      textColor: textColor,
      padding: const EdgeInsets.all(16.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(btnText, style: TextStyle(fontSize: 20)),
      onPressed: () {
        this.setStatus(idx);
      },
    );
  }

  void setStatus(idx) {
    print("Home: setStatus($idx)");
  }

Answer 1

如果您想在小部件周围留出一点空间（可自定义两侧），那么from numpy import submodule1, submodule2是您需要的小部件：

只需将Padding包装在Column中，并将其Padding属性设置为padding，您的左右两边就会有16dp的空间const EdgeInsets.symmetric(horizontal: 16)。

Padding class - widgets library - Dart API

Answer 2

您可以将其包装在容器中，并根据设备的width属性计算所需的宽度


Container(
    width: MediaQuery.of(context).size.width * 0.96 // 96% of the screen width,
    child:  _createButton(idx: 1, btnText: 'Button 1', btnColor: Colors.red),
)

或者您可以将以margin命名的参数提供给Container小部件

Container(
    //width: MediaQuery.of(context).size.width * 0.96 // 96% of the screen width
    margin: const EdgetInsets.all(5),
    child:  _createButton(idx: 1, btnText: 'Button 1', btnColor: Colors.red),
)

创建RaisedButton稍小于屏幕宽度

2 个答案: