小编典典

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

flutter

借助MediaQuery,我可以获得Samsung S7
Edge屏幕尺寸的高度和宽度,因此可以使用它。但是如何使用MediaQuery在ListTile中布置多列动态文本?在我的演示项目中,我将文本大小设置为12,在Samsung
S6中,我遇到了溢出问题… Flutter中文本比例因子的任何信息或示例?

我在这里找到了一个解决方案Flutter如何处理dpi文本和图像大小的差异,我尝试构建演示项目。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,
            ),
          ],
        ),
      ],
    ),
  ),

阅读 324

收藏
2020-08-13

共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来获取设备的maxHeightmaxWidth,之后您可以像以下示例一样更改文本大小:

  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,
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      });
2020-08-13