为什么 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'),
            ),
          ],
        ),
      ),
    )

为什么在移动设备上按钮有边距，而在网络上却没有？

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

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

那么输出是，