如何限制 TextSpan 小部件的文本长度
Posted
技术标签:
【中文标题】如何限制 TextSpan 小部件的文本长度【英文标题】:How to limit text length of a TextSpan widget 【发布时间】:2020-01-01 07:04:28 【问题描述】:我是 Flutter 的新手。使用TextSpan
小部件时如何限制文本?
我的代码
Widget build(BuildContext context)
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: Row(
children: <Widget>[
Stack(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8)),
child: Image.asset(
lastPlayedGame.imagePath,
height: 60,
width: 45,
fit: BoxFit.cover,
),
),
Positioned(
left: 8,
right: 8,
top: 0,
bottom: 0,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
child: Icon(
Icons.play_arrow,
color: Colors.red,
),
),
),
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: RichText(
text: TextSpan(children: [
TextSpan(text: lastPlayedGame.name, style: headingTwoTextStyle,),
TextSpan(text: '\n'),
TextSpan(text: "$lastPlayedGame.hoursPlayed hours played", style: bodyTextStyle),
]),
),
)
],
),
),
Expanded(
child: GameProgressWidget(screenWidth: screenWidth, gameProgress: gameProgress),
),
],
),
);
在我的 android 设备上运行时,出现错误:
一个 RenderFlex 在右侧溢出了 15 个像素。
如何限制文本长度?也许检查文本是否最大屏幕,将显示Assasin's Creed...
(可能带点?)
【问题讨论】:
【参考方案1】:如果您想在Row 中使用您的RichText 小部件并防止用省略号溢出,您首先必须将其包装在Flexible 中。 Flexible
显示Row
可以缩小RichText
。
将RichText
包装在Flexible
中后,只需将overflow: TextOverflow.ellipsis
添加到您的RichText
。这是一个最小的例子,RichText
在 Flexible
内 Row
。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
padding: EdgeInsets.all(4.0),
color: Colors.lime,
width: 200.0,
child: Row(
children: <Widget>[
Flexible(
child: RichText(
overflow: TextOverflow.ellipsis,
strutStyle: StrutStyle(fontSize: 12.0),
text: TextSpan(
style: TextStyle(color: Colors.black),
text: 'A very long text :)'),
),
),
Container(
width: 100.0,
height: 100.0,
color: Colors.orangeAccent,
)
],
),
)),
),
);
【讨论】:
【参考方案2】:没有必要使用 RichText。只需添加您的 Text 参数
overflow: TextOverflow.ellipsis
和 Wrap the Text 小部件与 Flexible
示例:
Row(
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey),
Flexible(
child: Text(propertyModel.propertyAddress, style: AppTextStyle.headerSmall2(context),
overflow: TextOverflow.ellipsis),
)
],
),
【讨论】:
【参考方案3】:尝试设置溢出属性:
overflow: TextOverflow.ellipsis
【讨论】:
嗨@Munjunath,我尝试了,但输出仍然相同 仅此一项在Row
中是行不通的。 @Bertho Joris 你可以看看我的答案,我已经添加了缺失的信息。【参考方案4】:
如果你想自定义也可以试试这个:
Text(
_name.length > 10 ? _name.substring(0, 10)+'...' : _name,
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.w500,
),
),
如果文本长度超过10,则显示ellipsis
。
【讨论】:
【参考方案5】:@override
Widget build(BuildContext context)
return Scaffold(
body: Center(
child: Container(
padding: EdgeInsets.all(4.0),
color: Colors.lime,
height: 200,
width: 200.0,
child: Row(
children: <Widget>[
Flexible(
child: Text("Mais de 200 países criaram restrições à entrada de brasileiros por conta da nossa gestão da pandemia",
overflow: TextOverflow.visible),
)
],
),
)
),
);
【讨论】:
请添加一些注释或评论,说明您的答案如何帮助解决 OP 的问题,而且我看到您的解决方案不涵盖不同的屏幕尺寸...【参考方案6】:添加更多到上面选择的答案。如果您想在一定数量的行之后显示点 (...),您可以使用 maxLines
选项。
例子:
....
....
Flexible(
child: RichText(
overflow: TextOverflow.ellipsis,
maxLines: 2, // this will show dots(...) after 2 lines
strutStyle: StrutStyle(fontSize: 12.0),
text: TextSpan(
style: TextStyle(color: Colors.black),
text: 'A very long text :)'
),
),
),
.....
.....
【讨论】:
是行限制而不是文本限制以上是关于如何限制 TextSpan 小部件的文本长度的主要内容,如果未能解决你的问题,请参考以下文章