Flutter 2: 移除 ElevatedButton / TextButton 的额外边距

Question

我希望了解如何去除ElevatedButton和TextButton周围的边距。

以下是详细信息：

Column(
  children: [
    ElevatedButton(
        onPressed: () {
        },
        child: Text('Login')
    ),

    TextButton(
        onPressed: () {
        },
        child: Text('Login')
    ),
  ],
)

你会怎么做？

- Da2ny

---

这个问题是从以下链接复制的：https://dev59.com/6FQK5IYBdhLWcg3wBrQK - Mod

@Mod，您可能会发现我的问题标题与您链接中的问题标题有所不同。这里有一个链接，了解填充和边距的更多信息：https://www.google.com/amp/s/www.geeksforgeeks.org/css-padding-vs-margin/amp/ 。此外，我认为在6个月前已经正确回答了这个问题后再发布这个回复有点无用。 - Da2ny

Answer 1

以下是解决方案：

ElevatedButton(
    onPressed: () {
    },
    style: ElevatedButton.styleFrom(
      tapTargetSize: MaterialTapTargetSize.shrinkWrap
    ),
    child: Text('Login')
),

TextButton(
    onPressed: () {
    },
    style: TextButton.styleFrom(
      padding: EdgeInsets.zero,
      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      minimumSize: Size(0, 0)
    ),
    child: Text('Login')
),

tapTargetSize: MaterialTapTargetSize.shrinkWrap

MaterialTapTargetSize: 配置某些 Material widget 的点击目标和布局尺寸。 更改 ThemeData.materialTapTargetSize 中的值会影响可访问性体验。

shrinkWrap: 将点击目标大小缩小到 Material 规范提供的最小值。

更多信息请参见官方flutter文档

希望这可以帮助您！如果您有更好的解决方案，请告诉我！

- Da2ny

---

“minimumSize” 似乎是消除视觉边距的关键。此外，可以使用 “Size.zero”。 - Chuck Batson