Flutter web 按钮大小问题

Posted 2023-02-23

【中文标题】Flutter web 按钮大小问题

【英文标题】：Flutter web button size issue

【发布时间】：2021-02-24 14:22:43

【问题描述】：

我正在为网络和移动设备创建一个跨平台应用程序。但是，这些按钮具有不同的默认高度，具体取决于平台。如何在不检查平台的情况下使按钮的高度在移动设备和 Web 上的大小相同？

【参考方案1】：

如果您使用的是 RaisedButton 等材质小部件，您可以按如下方式控制高度：

ButtonTheme(
  height: 100.0,
  child: RaisedButton(
    onPressed: () ,
    child: Text("Click here!"),
  ),
);

【讨论】：

我猜 100.0 在移动和网络上是不一样的。将高度设置为 100 时，网络上的按钮明显变细。

嗯，这取决于我猜的像素和分辨率。

【参考方案2】：

就我而言，Web 上的按钮明显小于移动设备上的按钮。我明确传递了padding，但它在 Flutter 框架内进行了调整。

移动（按预期）：

网页：

按钮代码如下：

  @override
  Widget build(BuildContext context) => RaisedButton(
        onPressed: onPressed,
        color: color,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(4),
        ),
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
        child: child,
      );

我通过在MaterialApp 初始化中将ThemeData 中的visualDensity 设置为VisualDensity.standard 解决了这个问题。出于某种原因，默认值为VisualDensity.compact。

class MyApp extends StatelessWidget 
  // ...

  @override
  Widget build(BuildContext context) => MaterialApp(
        // ...
        theme: ThemeData(
          // ...
          visualDensity: VisualDensity.standard,
        ),
        // ...
      );

现在大小也符合 Web 上的预期。