在Flutter中创建一个带圆角的按钮/带边框半径的按钮

52 浏览
0 Comments

在Flutter中创建一个带圆角的按钮/带边框半径的按钮

我目前在Flutter中开发一个Android应用程序。怎样添加一个圆角按钮？

admin 更改状态以发布 2023年5月20日
0

2 答案

0 Comments

更新

由于左侧的按钮已被弃用，请使用右侧的按钮。

Deprecated    -->   Recommended
RaisedButton  -->   ElevatedButton
OutlineButton -->   OutlinedButton
FlatButton    -->   TextButton

  • ElevatedButton

  1. 使用弧形边框StadiumBorder

    图片描述

    ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(shape: StadiumBorder()),
)

  2. 使用圆角矩形边框RoundedRectangleBorder

    图片描述

    ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12), // <-- Radius
    ),
  ),
)

  3. 使用圆形边框CircleBorder

    图片描述

    ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(24),
  ),
)

  4. 使用倾斜矩形边框BeveledRectangleBorder

    图片描述

    ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12)
    ),
  ),
)

OutlinedButton

  1. 使用弧形边框StadiumBorder

    图片描述

    OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: StadiumBorder(),
  ),
)

  2. 使用圆角矩形边框RoundedRectangleBorder

    图片描述

    OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

  3. 使用圆形边框CircleBorder

    图片描述

    OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: CircleBorder(),
    padding: EdgeInsets.all(24),
  ),
)

  4. 使用倾斜矩形边框BeveledRectangleBorder

    图片描述

    OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

TextButton

TextButton 使用方式类似于 ElevatedButton 和 OutlinedButton，不同之处在于只有在按钮被按下时才能看到形状。

0
0 Comments

1. 解决方案概述

FlatButton和RaisedButton已过时。

因此，你可以使用TextButton和ElevatedButton的style属性中的shape。

自Flutter 2.0以来，有一些变化：

2. 圆角按钮

在style属性中存在shape属性：

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

Enter image description here

方形按钮

对于一个方形的按钮，你可以使用ElevatedButton或者添加以下代码：

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

Enter image description here

完整示例

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    TextButton(
      child: Text(
        "Add to cart".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        padding: MaterialStateProperty.all(EdgeInsets.all(15)),
        foregroundColor: MaterialStateProperty.all(Colors.red),
        shape: MaterialStateProperty.all(
          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(Colors.white),
        backgroundColor: MaterialStateProperty.all(Colors.red),
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.zero,
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    )
  ]
)

0