文本小部件在 Flutter 中没有正确省略
Ko *_*han 8 flutter flutter-layout
- 我正在尝试创建一个包含 10 个数据的列表视图，在每个项目中有四个小部件包裹在一行中。
- 首先我插入了一个圆形图像小部件，接下来我添加了扩展小部件以平均划分文本小部件。
- 几乎，我已经实现了，但我发现省略文本有困难。
代码
class EmailPage extends StatefulWidget {
@override
_EmailPageState createState() => _EmailPageState();
}
class _EmailPageState extends State<EmailPage> {
GlobalKey _keyRed = GlobalKey();
var name = "Adellena Jacksonnnnnnnnnnnnnnnnnnnnnnnnnnnn";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: greenColor,
title: const Text('Inbox'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.edit),
onPressed: () => Navigator.of(context).pop(null),
),
],
),
body: SizedBox(
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
SizedBox(
width: 30,
height: 30,
child: CircleAvatar(
backgroundColor: Colors.brown.shade800),
),
Expanded(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 4,
child: Container(
child: new Text(
name,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(fontSize: 14),
),
),
),
new Expanded(
flex: 3,
child: new Text(
"&14215",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),
),
),
new Expanded(
flex: 3,
child: new Text(
"1000 min ago",
textAlign: TextAlign.end,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 14),
),
),
],
),
),
],
),
);
}),
));
}
}
截图 1
当我们
overflow: TextOverflow.ellipsis在文本小部件中删除时看起来像这样 [屏幕截图 2]
截图 2
在上图中，我没有得到全文“AdelenaJacksonnnnnnnnn”，但扩展限制了小部件可以在其中显示多少个flex。问题是省略号没有按预期工作
注意：当我删除字符串中的空格时，var name = "AdellenaJacksonnnnnnnnn";像这个省略号一样工作正常
无夜之*_*之星辰 31
最简单的方法：
var name = 'Adellena Jacksonnnnnnnnn';
name = name.replaceAll('', '\u200B');
为了更简单地使用，您可以编写一个扩展：
extension StringExtension on String {
String useCorrectEllipsis() {
return replaceAll('', '\u200B');
}
}
用法：
final name = 'Adellena Jacksonnnnnnnnn'.useCorrectEllipsis();
- 您好，@Nazar \u200B 表示零宽度空格字符，这是一个您看不到的特殊空间，但可以充当正常空间。 (2认同)
您可以利用这个愚蠢的技巧，通过将名称拆分为，如果您为名字设置任何最大长度，您可以修改并实际使用它。
我已经剪掉了名字，所以它看起来不会像 ui 溢出一样，假设没有 maxlength
Flexible(
child: Text(
tempname[0],
overflow: TextOverflow.clip,
maxLines: 1,
),
),
姓氏设置省略号以显示名称溢出
Flexible(
child: Text(
tempname[0],
overflow: TextOverflow.ellipsis,
),
),
ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (BuildContext context, int index) {
var tempname = name.split(' ');
return Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
SizedBox(
width: 30,
height: 30,
child: CircleAvatar(
backgroundColor: Colors.brown.shade800),
),
Expanded(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 4,
// width: 100,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Text(
tempname[0],
overflow: TextOverflow.clip,
maxLines: 1,
),
),
Text(' '),
Flexible(
child: Text(
tempname[1],
overflow: TextOverflow.ellipsis,
),
)
],
),
),
new Expanded(
flex: 3,
child: new Text(
"&14215",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),
),
),
new Expanded(
flex: 3,
child: new Text(
"1000 min ago",
textAlign: TextAlign.end,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 14),
),
),
],
),
),
],
),
);
}),
name = 'Adellenaddddddddddddd Jacksoonnnnnnnnnn';
name = 'Nadeem Jacksonnnnnnnn';
| 归档时间： |
|
| 查看次数： |
9080 次 |
| 最近记录： |