如何在Flutter中为MaterialButton设置圆角边框？

Question

如何在Flutter中为MaterialButton设置圆角边框？

18

我正在尝试将圆角边框设置为我的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;
          });
        },
      ),
    );
  }

结果：

- Augusto

请问您的问题与这个问题有多大的不同？ - user1462442

MaterialButton小部件有一个shape属性，我想使用它，而不是像Container这样的其他小部件。 - Augusto

4个回答

9

MaterialButton(
        child: Text('My Button'),
        height: 40,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
)

RoundedRectangleBorder可以帮助您创建圆角矩形边框。详情请见https://api.flutter.dev/flutter/painting/RoundedRectangleBorder-class.html

- A J

3

你需要设置MaterialButton的形状和Material的borderRadius，以使其在动画选项卡时变成圆形：

Material(
  elevation: 10.0,
  borderRadius: BorderRadius.circular(30.0),//12
  color: Colors.transparent,//Colors.cyan.withOpacity(0.5),
  child: MaterialButton(
    minWidth: MediaQuery.of(context).size.width,
    color: Colors.cyan.withOpacity(0.7),
    shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(30.0) ),
    splashColor: Colors.cyan,
    onPressed: () async {},
    child: Text('Login',
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: 18.0,
          color: Colors.black,
          fontWeight: FontWeight.w400,
          //fontFamily: lang.font
        )),
  ),
);

- phnghue

2

你尝试过在ClipRRect()中包裹它吗？"最初的回答"

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

您可以在此处找到文档：ClipRRect()。将原始答案翻译为“最初的回答”。

- Robin Reiter

有无数种方法可以使边框半径变成圆形，我想使用MaterialButton的shape属性。 - Augusto

你可能需要采用一种变通方法，因为这似乎是Flutter中未解决的问题。[https://github.com/flutter/flutter/issues/24225](Github #24225)坚持使用MaterialButton()的原因是什么？ - Robin Reiter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- anmol.majhail · Accepted Answer

如果你需要使用MaterialButton() - 你需要用Material小部件包装按钮，以获得所需的行为。

    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,