为什么 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

非常有趣的问题。谢谢你的询问。

这基本上是由于 的ThemeData.materialTapTargetSize参数造成的MaterialApp。

在您的情况下，此功能决定了 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(),
)

那么输出是，