颤振，根据设备的 dpi 调整 fontsize 和 maxline

Posted 2023-02-23

【中文标题】颤振，根据设备的 dpi 调整 fontsize 和 maxline

【英文标题】：Flutter, conform fontsize and maxline depending on dpi of device

【发布时间】：2019-12-17 13:06:17

【问题描述】：

我有一个应用程序，它有几个按钮，其中包含一个图标、一个标题和一些文本。我在 3 个 android 模拟器上查看应用程序。从 Android Studio 创建的 xxhdpi、hdpi 和 mdpi。然而，它们都有不同的设计。如何设置它以使它们都有些对齐。

现在我并不幻想我可以让所有三个完全一样，但是如果我可以让它们相似的话，我会发生的。

例如； hdpi 文本适合卡，mdpi 给我们更多空间。

您如何设计多 dpi/分辨率的应用程序？

主题：

textTheme: TextTheme(
  title: TextStyle(fontSize: 24.0, height: 1.0, color: Theme.of(context).primaryColor),
  headline: TextStyle(fontSize: 18.0,height: 1.0, color: Colors.white),
  subtitle: TextStyle(fontSize: 16.0,height: 1.0, color: Theme.of(context).primaryColor),
  body1: TextStyle(fontSize: 12.0, height: 1.1, color: Colors.black87),
),

按钮：

return RawMaterialButton(
    child: 
    Container(
    decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(15)),
        color: Colors.white,
        boxShadow: [
            BoxShadow(
            blurRadius: 2.0,
            color: Colors.grey,
            offset: Offset(0.0, 6.0),
            )
        ]),
    margin: EdgeInsets.all(5.0),
    padding: EdgeInsets.all(5.0),
    height: MediaQuery.of(context).size.height * 0.20,
    width: MediaQuery.of(context).size.width * 0.95,
    child: Row(
        children: <Widget>[
        Container(
            width: MediaQuery.of(context).size.width * 0.85,
            child: Column(
            children: <Widget>[
                Row(
                children: <Widget>[
                    Padding(
                    padding: EdgeInsets.all(4.0),
                    child: Image.asset(
                        _buttonIcon,
                        height: MediaQuery.of(context).size.width * 0.06,
                        width: MediaQuery.of(context).size.width * 0.06,
                        color: Theme.of(context).primaryColor,
                    ),
                    ),
                    Padding(
                    padding: EdgeInsets.fromLTRB(4.0, 4.0, 4.0, 4.0),
                    child: Text(
                        _buttonTitle,
                        style: Theme.of(context).textTheme.subtitle, 
                    ),
                    ),
                ],
                ),
                Container(
                child: Padding(
                    padding: EdgeInsets.all(4.0),
                    child: RichText(
                    maxLines: ((MediaQuery.of(context).size.height * 0.20) / Theme.of(context).textTheme.body1.fontSize).floor(),
                    overflow: TextOverflow.ellipsis,
                    text: TextSpan(
                        children: <TextSpan>[
                        TextSpan(
                            text: _buttonText,
                            style: Theme.of(context).textTheme.body1),
                        ],
                    ),
                    ),
                ),
                ),
            ],
            ),
        ),
        Container(
            child: Icon(
            Icons.keyboard_arrow_right,
            color: Theme.of(context).primaryColor,
            ),
        ),
        ],
    ),
    ),
    onPressed: _onPressed,
);

截图：

【参考方案1】：

我认为您需要在开始时询问 Mediaquery 设备大小，并根据某些范围决定必要的缩放因子，而不是在所有情况下简单地将返回的大小乘以设置的缩放值。看起来你需要额外的控制。

【讨论】：

好吧，我会调查一下 Mediaquery 的事情。在为移动设备编码时，是否有一个常见的黄金比例。

可能有，但我不知道。我倾向于打印我得到的值并从中做出缩放决定。由于某些屏幕/设备呈现像素的方式，您有时会得到令您惊讶的值。 Mediaquery 这里有一个很好的答案***.com/questions/50214338/…

另外一件事，您可能应该只在页面中的一个位置调用 Mediaquery，并将返回的值存储在变量中。然后在您的 rawmaterialbutton 代码中使用这些变量。我相信您多次调用它会产生性能开销。

这是我对 MediaQuery 值所做的注释：/ MediaQuery 报告的大小以逻辑像素为单位。该值乘以 // devicePixelRatio 与规定的屏幕分辨率相匹配，例如。华为 P Smart 屏幕为 // 2060 x 1080，报告的设备宽度为 360，pixelRatio 为 3.0。 // 这意味着屏幕将比具有较小像素比的 2060 x 1080 设备更窄 // 即。更好的屏幕质量。