可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

With MediaQuery I can get height and width of my Samsung S7 Edge screen size so I can work with it. But how to use MediaQuery to layout the multiple column dynamic text in ListTile? In my demo project I set the text size to 12 and in Samsung S6 I get overflow issues... Any info or example for text scale factor in Flutter?

I found one solution here (How can Flutter handle dpi text and image size differences) and I try to build demo project. S6 textScaleFactor is 1.1 an the S7 is 1.0....

My original demo app that I test it with S7 text size was 12. And when I try to test it in S6 I get overflow issue... I need to scale down or up with MediaQuery to set text scale factor, so it can work most of the devices without getting a overflow issues?

In ListTile I have a column that has 4 separate lines of text and all the value comes from database. If the text value is long I get a overflow issues on S6 device. So my question is How to use MediaQuery to set scaleFactor for text in Flutter?

Update:

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,             ),           ],         ),       ],     ),   ),

回答1:

You can solve your issue wrapping your Text widget into a Flexible to avoid the overflow. I put maxLines 1 to see the Fade overflow :

          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,                     ),                   ],                 ),

I added a global variable :

  var myTextSize = 12.0;

Also you can use the LayoutBuilder in order to get the maxHeight or maxWidth of your device, after that you can change the text size like this example:

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

文章来源: How to use MediaQuery to set scaleFactor for text in Flutter?

标签

overflow