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

Question

使用 MediaQuery，我可以获取三星 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 设备上遇到溢出问题。所以我的问题是如何使用 MediaQuery 为 Flutter 中的文本设置 scaleFactor？

更新：

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

@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,
      );
    },
  );
}

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

您可以解决将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,
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      });