在 Flutter 中创建一个带边框半径的圆形按钮/按钮 [英] Create a rounded button / button with border-radius in Flutter

问题描述

我目前正在 Flutter 中开发一个 Android 应用.如何添加圆形按钮?

解决方案

1.解决方案总结

FlatButton 和 RaisedButton 已弃用.

因此，您可以将 shape 放在 style 属性中，用于 TextButton 和 ElevatedButton.

自 Flutter 2.0 以来有一些变化:

• style:属性类型已更改为

  方形按钮

  对于方形按钮，您可以使用 ElevatedButton 或以其他方式添加:

  style: ButtonStyle(形状:MaterialStateProperty.all(圆角矩形边框(边界半径:BorderRadius.zero，边:BorderSide(颜色:Colors.red))))

  完整示例

  Row(mainAxisAlignment: MainAxisAlignment.end,孩子们: [文本按钮(孩子:文本(加入购物车".toUpperCase(),样式:TextStyle(字体大小:14)),样式:按钮样式(填充:MaterialStateProperty.all(EdgeInsets.all(15)),前景颜色:MaterialStateProperty.all<Color>(Colors.red),形状:MaterialStateProperty.all(圆角矩形边框(borderRadius: BorderRadius.circular(18.0),边:BorderSide(颜色:Colors.red)))),onPressed: () =>空值),大小框(宽度:10)，升高按钮(孩子:文本(立即购买".toUpperCase(),样式:TextStyle(字体大小:14)),样式:按钮样式(foregroundColor: MaterialStateProperty.all<颜色>(Colors.white),backgroundColor: MaterialStateProperty.all(Colors.red),形状:MaterialStateProperty.all(圆角矩形边框(边界半径:BorderRadius.zero，边:BorderSide(颜色:Colors.red)))),onPressed: () =>空值)])

  I'm currently developing an Android app in Flutter. How can I add a rounded button?

  解决方案

  1. Solution Summary

  FlatButton and RaisedButton are deprecated.

  So, you can use shape which placed in the style property, for TextButton and ElevatedButton.

  There are some changes since Flutter 2.0:

  • style: the property type has changed to ButtonStyle
  • shape: the property type has changed to MaterialStateProperty<T>

  2. Rounded Button

  Inside the style property exists the shape property:

  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
        side: BorderSide(color: Colors.red)
      )
    )
  )
  

  Square Button

  For a square button you can use ElevatedButton or otherwise add:

  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.zero,
        side: BorderSide(color: Colors.red)
      )
    )
  )
  

  Complete Example

  Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      TextButton(
        child: Text(
          "Add to cart".toUpperCase(),
          style: TextStyle(fontSize: 14)
        ),
        style: ButtonStyle(
          padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
          foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(18.0),
              side: BorderSide(color: Colors.red)
            )
          )
        ),
        onPressed: () => null
      ),
      SizedBox(width: 10),
      ElevatedButton(
        child: Text(
          "Buy now".toUpperCase(),
          style: TextStyle(fontSize: 14)
        ),
        style: ButtonStyle(
          foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
          backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.zero,
              side: BorderSide(color: Colors.red)
            )
          )
        ),
        onPressed: () => null
      )
    ]
  )
  
  

  这篇关于在 Flutter 中创建一个带边框半径的圆形按钮/按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！