为什么Flutter Web中的按钮没有外边距？

Question

我有以下的代码：

Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {},
              child: Text('Boton 1'),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('Boton 2'),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text('Boton 3'),
            ),
          ],
        ),
      ),
    )

为什么在移动设备上按钮有外边距，但在网页上没有呢？

注意：我知道可以手动添加填充/边距，设置默认按钮样式等。我想知道为什么默认行为不同。

- Yayo Arellano

Answer 1

这是一个非常有趣的问题，感谢您的提问。

这主要是由于MaterialApp的ThemeData.materialTapTargetSize参数导致的。

这个功能决定了Material Button（在您的情况下为ElevatedButton）的可触摸尺寸。

行为上的差异是由于代码中flutter/lib/src/material/theme_data.dart第377行的这部分代码引起的：flutter sdk: ">=2.12.0 <3.0.0"

switch (platform) {
  case TargetPlatform.android:
  case TargetPlatform.fuchsia:
  case TargetPlatform.iOS:
    materialTapTargetSize ??= MaterialTapTargetSize.padded;
    break;
  case TargetPlatform.linux:
  case TargetPlatform.macOS:
  case TargetPlatform.windows:
     materialTapTargetSize ??= MaterialTapTargetSize.shrinkWrap;
    break;
}

MaterialTapTargetSize.padded 会使按钮的高度为 48。而 MaterialTapTargetSize.shrinkWrap 则按其字面意思移除该约束。

如果您的 MaterialApp 如下所示：

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
  home: CupertinoPickerExample(),
)

然后输出结果是：

- Nisanth Reddy

---

不，谢谢你的询问。我过去一个月一直在学习Flutter，并且因为你的问题而度过了美好的时光。我也点赞了你的问题。 :) - Nisanth Reddy

Answer 2

除了 @Nisanth Reddy 的回答之外，您可能还想查看 visualDensity，它也是由defaultTargetPlatform这里设置的，作为this的结果。

为确保在各个平台上具有一致的外观，我使用以下方法 -

MaterialApp(
  ...
  theme: ThemeData(
    ...
    materialTapTargetSize: MaterialTapTargetSize.padded,
    visualDensity: VisualDensity.standard,
  ),
)

- Dev Aggarwal