借助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, ), ], ), ], ), ),
您可以解决将Text小部件包装到Flexible以避免溢出的问题。我把maxLines 1放到Fade上看:
Text
Flexible
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,之后您可以像以下示例一样更改文本大小:
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, ), ], ), ], ), ), ); });