我目前正在Flutter开发一个Android应用程序。我如何添加一个圆形按钮?
当前回答
你也可以使用ButtonTheme():
下面是示例代码
ButtonTheme(
minWidth: 200.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.green)),
child: RaisedButton(
elevation: 5.0,
hoverColor: Colors.green,
color: Colors.amber,
child: Text(
"Place Order",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
onPressed: () {},
),
),
其他回答
通过将一个透明的颜色传递给BoxDecoration中的color属性,可以将此代码用于一个透明的圆形按钮。 如。颜色:Colors.transparent。 另外,请注意这个按钮只使用Container和GestureDetector小部件。
Container(
height: 50.0,
child: GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xFFF05A22),
style: BorderStyle.solid,
width: 1.0,
),
color: Colors.transparent,
borderRadius: BorderRadius.circular(30.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(
child: Text(
"BUTTON",
style: TextStyle(
color: Color(0xFFF05A22),
fontFamily: 'Montserrat',
fontSize: 16,
fontWeight: FontWeight.w600,
letterSpacing: 1,
),
),
)
],
),
),
),
)
在容器小部件中包装一个TextButton,如下所示:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.black),
),
child: TextButton(
onPressed: () {
// To do
},
child: Text("Go to Change Language Screen "),
),
)
2020年9月起,Flutter 1.22.0:
“RaisedButton”和“FlatButton”都已弃用。
最新的解决方案是使用新的按钮:
1. ElevatedButton:
代码:
ElevatedButton(
child: Text("ElevatedButton"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
primary: Colors.red,
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
别忘了,还有一个.icon构造函数可以方便地添加图标:
ElevatedButton.icon(
icon: Icon(Icons.thumb_up),
label: Text("Like"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
2. OutlinedButton:
代码:
OutlinedButton.icon(
icon: Icon(Icons.star_outline),
label: Text("OutlinedButton"),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
side: BorderSide(width: 2.0, color: Colors.blue),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
)
3. TextButton:
如果你不想要轮廓或颜色填充,你总是可以使用TextButton。
1. 解决方案概述
FlatButton和RaisedButton已弃用。
因此,你可以使用形状放在样式属性,为TextButton和ElevatedButton。
自Flutter 2.0以来有一些变化:
style:属性类型已更改为ButtonStyle shape:属性类型已更改为MaterialStateProperty<T>
2. 圆形的按钮
在style属性中存在shape属性:
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: Colors.red)
)
)
)
方形按钮
对于方形按钮,您可以使用ElevatedButton或添加其他方式:
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
)
完整的示例
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
)
]
)
您可以简单地使用RaisedButton
Padding(
padding: EdgeInsets.only(left: 150.0, right: 0.0),
child: RaisedButton(
textColor: Colors.white,
color: Colors.black,
child: Text("Search"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
),
)
输出:
更多信息:RSCoder