Flutter TextButton删除填充和内部填充[重复]

Posted 2023-02-23

【中文标题】Flutter TextButton删除填充和内部填充[重复]

【英文标题】：Flutter TextButton Remove Padding and Inner Padding [duplicate]

【发布时间】：2021-05-23 06:52:51

【问题描述】：

我刚刚更新了 Flutter 中的代码以使用 TextButton 而不是旧的 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 但这不允许我设置高度等。

【问题讨论】：

对于第二个按钮，您是否尝试增加 BorderRadius 值？

@CodeSadhu 是的。 BorderRadius.circular(12.0) 但是我已经找到了解决方案。我没有填充它只是设置了 minWidth/minHeight。

好吧，酷！很高兴您找到了解决方案。

【参考方案1】：

Flutter TextButton 是新按钮。由于 Flutter 2.0 FlatButton 已被弃用。

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

对于内部填充，只需在子属性中使用 Padding 小部件 - 它为您提供任何字符串长度的一致样式。

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

【参考方案2】：

需要设置三个属性：minimumSize、padding和tapTargetSize

TextButton(
  onPressed: (),
  child: Icon(Icons.delete, color: Colors.black54),
  style: TextButton.styleFrom(
    minimumSize: Size.zero,
    padding: EdgeInsets.zero,
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),
)

编辑：

我在代码中添加了一些填充，看起来不错。

padding: EdgeInsets.fromLTRB(10.0, 3.0, 10.0, 3.0),

【参考方案3】：

好的，我刚刚想通了。需要设置minimumSize属性。

OutlinedButton.styleFrom(
  minimumSize: Size(widthValue, heightValue),
)

这就是我的按钮比我想要的大的原因。