Flutter TextButton删除填充和内部填充 [英] Flutter TextButton Remove Padding and Inner Padding

问题描述

我刚刚在Flutter中更新了代码，以使用TextButton代替旧的 FlatButton .不过，我不知道如何设置按钮的宽度和高度.

I just updated my code in Flutter to use TextButton instead of old FlatButton. I can't figure out how to set width and height of a button though.

我遇到两个问题.第一个是我现在有这个图标Button:

I got two problems. First one is that I have this icon Button now:

TextButton.icon(
    label: Container(),
    style: TextButton.styleFrom(padding: EdgeInsets.all(0),
        backgroundColor: Colors.black26),
        icon: Icon(Icons.share, color: Theme.of(context).primaryColor),
        onPressed: () {}),

它看起来像这样:

我不知道如何摆脱左侧和右侧的填充.尽管我确实将样式内的填充设置为零.

I can't figure out how to get rid of the padding on the left and the right. Although I did set the padding inside the style to zero.

我的第二个问题是我有一个这样的按钮:

My Second Problem is a button that I had like this:

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)),
    ));
}

，它看起来像这样:

现在，我将代码更新为:

Now I updated my code to this:

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: () {})

但是现在看起来像这样:顶部/底部的填充过多，但我不知道如何将其最小化.

But it looks like this now: The padding on top/bottom is too much but I can't figure out how to minimize it.

有什么建议吗?谢谢！

编辑:我尝试使用OutlinedButtonTheme，但这不允许我设置高度等.

I tried to use OutlinedButtonTheme but this did not allow me to set a height etc.

推荐答案

Flutter TextButton 是新按钮.由于不推荐使用Flutter 2.0 FlatButton.

Flutter TextButton is the new button. Since Flutter 2.0 FlatButton is deprecated.

如何将此按钮与自定义样式一起使用的示例.这是带有图标的后退按钮.它的可压范围广，并根据设计向左对齐.

Example of how to use this button with custom styles. This is a back button with an icon. It has a wide pressable area and alignment to left according to design.

对于内部填充，只需在child属性中使用 Padding 小部件-它可为您提供任何String长度的一致样式.

For inner padding just use Padding widget in the child property - it gives you consistent style for any String length.

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,
  ),
),

这篇关于Flutter TextButton删除填充和内部填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！