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

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

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

Answer 1

很有趣的问题。谢谢提问。

这主要是由于 MaterialApp 的 ThemeData.materialTapTargetSize 参数造成的。

此功能决定 Material 按钮的可触摸尺寸，在您的情况下 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(),
)

那么输出是，

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

Why don't the buttons in Flutter Web have a margin?

flutter

flutter-layout

flutter-web