FlutterTextButton去除内边距和内边距
我刚刚在 Flutter 中更新了我的代码以使用 TextButton 而不是 old FlatButton
。我不知道如何设置按钮的宽度和高度。
我有两个问题。第一个是我现在有这个图标按钮:
TextButton.icon(
label: Container(),
style: TextButton.styleFrom(padding: EdgeInsets.all(0),
backgroundColor: Colors.black26),
icon: Icon(Icons.share, color: Theme.of(context).primaryColor),
onPressed: () {}),
就像这样:
我不知道如何摆脱左侧和右侧的填充。虽然我确实将样式内的填充设置为零。
我的第二个问题是我有一个这样的按钮:
ButtonTheme(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
height: 10,
minWidth: 15,
padding: EdgeInsets.only(top: 5, bottom: 5, right: 5, left: 5),
child: FlatButton(
color: Colors.white.withOpacity(0.9),
child: <MyChild>,
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: BorderSide(
color: condition
? Theme.of(context).primaryColor
: widget.color != null
? widget.color
: Colors.black54,
width: 0.5)),
));
}
它看起来像这样:
现在我将代码更新为:
OutlinedButton(
style: OutlinedButton.styleFrom(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: EdgeInsets.only(top: 0, bottom: 0, right: 5, left: 5),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
side: BorderSide(
width: 0.5,
color: condition
? Theme.of(context).primaryColor
: widget.color != null
? widget.color
: Colors.black54),
primary: Colors.white.withOpacity(0.9),
),
child: <MyChild>,
onPressed: () {})
但现在看起来像这样:
顶部/底部的填充太多,但我不知道如何将其最小化。
有什么建议吗?谢谢!
编辑:我尝试使用 OutlinedButtonTheme 但这不允许我设置高度等。
回答
扑 TextButton
是新的按钮。由于 Flutter 2.0 FlatButton 已弃用。
如何将此按钮与自定义样式一起使用的示例。这是一个带有图标的后退按钮。它有一个很宽的可按压区域,并根据设计向左对齐。
对于内部填充,只需Padding
在 child 属性中使用小部件 - 它为任何字符串长度提供一致的样式。
TextButton(
onPressed: () => Navigator.pop(context),
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
minimumSize: Size(50, 30),
alignment: Alignment.centerLeft),
child: Icon(
CupertinoIcons.back,
color: Colors.black,
size: 18,
),
),