如何在 Flutter 上为 MaterialButton 设置圆角边框？答案

【问题标题】：How to set rounded border to a MaterialButton on Flutter?如何在 Flutter 上为 MaterialButton 设置圆角边框？
【发布时间】：2019-07-16 15:05:23
【问题描述】：

我正在尝试为我的MaterialButton 设置圆角边框，为此我将RoundedRectangleBorder 设置为形状属性的MaterialButton，问题是它没有效果。

代码：

  Widget _showNeedHelpButton() {
    return new Padding(      
      padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
      child: new MaterialButton(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
        elevation: 5.0,
        minWidth: 200.0,
        height: 35,
        color: Color(0xFF801E48),
        child: new Text('Preciso de ajuda',
            style: new TextStyle(fontSize: 16.0, color: Colors.white)),
        onPressed: () {
          setState(() {
            _isNeedHelp = true;
          });
        },
      ),
    );
  }

结果：

【问题讨论】：

请问您的问题与这个问题有多大不同？ stackoverflow.com/questions/47423297/…
MaterialButton 小部件有一个 shape 属性，我想使用它，而不是像 Container 这样的其他小部件。

标签： flutter dart widget

【解决方案1】：

如果您需要使用MaterialButton() - 您需要使用Material Widget 扭曲按钮，以获得所需的行为。

    Widget _showNeedHelpButton() {
    return Padding(
      padding: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 0.0),
      child: Material(  //Wrap with Material
        shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(22.0) ),
        elevation: 18.0,
        color: Color(0xFF801E48),
        clipBehavior: Clip.antiAlias, // Add This
        child: MaterialButton(
          minWidth: 200.0,
          height: 35,
          color: Color(0xFF801E48),
          child: new Text('Preciso de ajuda',
              style: new TextStyle(fontSize: 16.0, color: Colors.white)),
          onPressed: () {
//          setState(() {
//            _isNeedHelp = true;
//          });
          },
        ),
      ),
    );
  }

输出：

更新：

  minWidth: 200.0,
  height: 95,

【讨论】：

为什么shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(22.0) ) 不换行不行？
他们很可能会在以后的更新中将其从 MaterialButton 中删除。
我可以改变高度和宽度吗？
@Augusto 什么不起作用 - ？我用了高度和宽度。工作正常。我什至更新了答案。
现在可以使用了...但是如果高度 > 30.0 就可以使用。例如，如果height = 10.0，则不会发生更改...

【解决方案2】：

您是否尝试将其包装在 ClipRRect() 中？

ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(20.0)),
  child: MaterialButton(...),
),

您可以在此处找到文档：ClipRRect()

【讨论】：

有无数种方法可以使边框半径变为圆形，我想使用MaterialButton 的shape 属性。
您可能必须寻求解决方法，因为这似乎是颤振的未解决问题。 [github.com/flutter/flutter/issues/24225](Github #24225) 坚持MaterialButton()的原因是什么？