[英]Flutter 2 - How to make rounded corners in the new TextButton and give it a height
如何在新的 TextButton 中添加给定高度并使其角变圆
这是在现已弃用的 FlatButton 中执行此操作的方法。
FlatButton(
height: 44,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
color: Colors.green[900],
minWidth: double.infinity,
onPressed: () => cart.gtynAddToCart(productID),
child: Text(
'Button',
style: TextStyle(color: Colors.white),
));
由于FlatButton
在 Flutter 2.0 中已弃用,您可以使用TextButton
尝试
TextButton(
onPressed: () => cart.gtynAddToCart(productID),
child: Container(
alignment: Alignment.center,
height: 44,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
color: Colors.green[900],
),
style:ButtonStyle(tapTargetSize:MaterialTapTargetSize.shrinkWrap,
),
// minWidth: double.infinity,
child: Text(
'Button',
style: TextStyle(color: Colors.white),
)))
我也找到了另一种实现方式,也许你很介意
TextButton(
onPressed: () => cart.gtynAddToCart(productID),
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize:
MaterialStateProperty.all(Size(double.infinity, 44)),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4.0)),
),
backgroundColor:
MaterialStateProperty.all(Colors.green[900])),
child: Text(
'Button',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
))
对于角半径,您必须在内部使用形状属性,您可以设置如下所示的内容,对于高度和宽度,只需给它填充。
FlatButton(
child: Text('Rounded Rectangle Border'),
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
color: Colors.pink,
textColor: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 30),
)
改用 RawMaterialButton:
RawMaterialButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(22),
),
side: BorderSide(color: Colors.white, width: 0.5)),
onPressed: () {},
child:
Text("Sign UP", style: TextStyle(color: Colors.white)),
),
新的 TextButton 小部件很难设置样式:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.