如何使用MediaQuery为Flutter中的文本设置scaleFactor?
问题内容:
借助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上看:
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,
),
],
),
],
),
),
);
});