Flutter中如何使用MediaQuery为文本设置scaleFactor？

Question

通过 MediaQuery，我可以获得我的 Samsung S7 Edge 屏幕尺寸的高度和宽度，以便我可以使用它。但是如何使用MediaQuery来布局ListTile中的多列动态文本呢？在我的演示项目中，我将文本大小设置为 12，而在三星 S6 中，我遇到了溢出问题...Flutter 中文本比例因子的任何信息或示例？

我在这里找到了一个解决方案 (How can Flutter handle dpi text and image size differences)，我尝试构建演示项目。 S6 textScaleFactor 是 1.1，S7 是 1.0....

我用 S7 文本大小测试它的原始演示应用程序是 12。当我尝试在 S6 中测试它时出现溢出问题...我需要使用 MediaQuery 缩小或放大以设置文本比例因子, 所以它可以在大多数设备上工作而不会出现溢出问题？

在 ListTile 中，我有一列有 4 行单独的文本，所有值都来自数据库。如果文本值很长，我会在 S6 设备上遇到溢出问题。所以我的问题是How to use MediaQuery to set scaleFactor for text in Flutter?

更新：

new ListTile(
    trailing: new Icon(Icons.chevron_right),
    onTap: () {

    },
    title: new Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Text(
          ‘My Account Details:’,
          style: new TextStyle(
              fontSize: 14.0, fontWeight: FontWeight.bold, color: Colors.black),
          overflow: TextOverflow.fade,
        ),
      ],
    ),
    subtitle: new Column(
      children: <Widget>[
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Text(‘Hello Flutter’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),

            new Text(’Today is **************’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Text(‘Name’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),
            new Text(‘Dart’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Text(’Surname’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),
            new Text(‘Flutter’,
              style: new TextStyle(
                  fontSize: 12.0, fontWeight: FontWeight.bold, color: Colors.black),
              overflow: TextOverflow.fade,
            ),
          ],
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            new Text(‘Account Name: Let’s Flutter all day long till down with fancy User Interface’,
              style: new TextStyle(
                  fontSize: 12.0, color: Colors.black54),
              overflow: TextOverflow.fade,
            ),
            new Text(‘109.65’,
              style: new TextStyle(
                  fontSize: 12.0, fontWeight: FontWeight.bold, color: Colors.black),
              overflow: TextOverflow.fade,
            ),
          ],
        ),
      ],
    ),
  ),

Answer 1

您可以解决将 Text 小部件包装到 Flexible 中以避免溢出的问题。我将 maxLines 设置为 1 以查看 Fade 溢出 :

          new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Flexible(
                      child: new Text(
                        "Account Name: Let's Flutter all day long till down with fancy User Interface",
                        maxLines: 1,
                        style: new TextStyle(
                            fontSize: myTextSize, color: Colors.black54),
                        overflow: TextOverflow.fade,
                      ),
                    ),
                    new Text(
                      "109.65",
                      style: new TextStyle(
                          fontSize: myTextSize,
                          fontWeight: FontWeight.bold,
                          color: Colors.black),
                      overflow: TextOverflow.fade,
                    ),
                  ],
                ),

我添加了一个全局变量：

  var myTextSize = 12.0;

您也可以使用 LayoutBuilder 来获取您设备的 maxHeight 或 maxWidth，之后您可以更改文本大小，如下例所示：

  var myTextSize = 12.0;

  return LayoutBuilder(builder: (context, boxConstraints) {
        print(boxConstraints.maxHeight);
        if (boxConstraints.maxHeight <= 667.0){
            myTextSize = 10.0;
        }
        return Container(
          child: new ListTile(
            trailing: new Icon(Icons.chevron_right),
            onTap: () {},
            title: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Text(
                  "My Account Details:",
                  style: new TextStyle(
                      fontSize: 14.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.black),
                  overflow: TextOverflow.fade,
                ),
              ],
            ),
            subtitle: new Column(
              children: <Widget>[
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Text(
                      "Hello Flutter",
                      style: new TextStyle(
                          fontSize: myTextSize, color: Colors.black54),
                      overflow: TextOverflow.fade,
                    ),
                    new Text(
                      "Today is **************",
                      style: new TextStyle(
                          fontSize: myTextSize, color: Colors.black54),
                      overflow: TextOverflow.fade,
                    ),
                  ],
                ),
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Text(
                      "Name",
                      style: new TextStyle(
                          fontSize: myTextSize, color: Colors.black54),
                      overflow: TextOverflow.fade,
                    ),
                    new Text(
                      "Dart",
                      style: new TextStyle(
                          fontSize: myTextSize, color: Colors.black54),
                      overflow: TextOverflow.fade,
                    ),
                  ],
                ),
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    new Text(
                      "Surname",
                      style: new TextStyle(
                          fontSize: myTextSize, color: Colors.black54),
                      overflow: TextOverflow.fade,
                    ),
                    new Text(
                      "Flutter",
                      style: new TextStyle(
                          fontSize: myTextSize,
                          fontWeight: FontWeight.bold,
                          color: Colors.black),
                      overflow: TextOverflow.fade,
                    ),
                  ],
                ),
                new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Flexible(
                      child: new Text(
                        "Account Name: Let's Flutter all day long till down with fancy User Interface",
                        maxLines: 1,
                        style: new TextStyle(
                            fontSize: myTextSize, color: Colors.black54),
                        overflow: TextOverflow.fade,
                      ),
                    ),
                    new Text(
                      "109.65",
                      style: new TextStyle(
                          fontSize: myTextSize,
                          fontWeight: FontWeight.bold,
                          color: Colors.black),
                      overflow: TextOverflow.fade,
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      });

Answer 2

如果你想让文本字体大小响应这是一个简单的技巧

fontSize: MediaQuery.of(context).size.width * 0.05 //u can play with equation

或

 fontSize: MediaQuery.of(context).size.width > 500  ?60 
           : MediaQuery.of(context).size.width < 300 ?40: 30,

Answer 3

@override
Widget build(BuildContext context) {
  return WidgetsApp(
    // ...
    builder: (context, child) {
      final mediaQueryData = MediaQuery.of(context);

      return MediaQuery(
        data: mediaQueryData.copyWith(textScaleFactor: 1.5),
        child: child,
      );
    },
  );
}

Flutter中如何使用MediaQuery为文本设置scaleFactor？

How to use MediaQuery to set scaleFactor for text in Flutter?

text

scale

dart

flutter