Flutter文本溢出时如何实现渐隐效果？已尝试方案无效求解决

我来帮你搞定这个文本溢出的问题！看了你的代码，问题出在文本所在的容器没有获得明确的宽度约束——Row组件里的右侧内容（包含描述文本的Wrap）没有被设置为填充剩余空间，导致文本可以无限延伸，你设置的overflow和maxLines自然就不起作用了。

具体修复步骤： #

• 把包裹Wrap的Padding组件用Expanded包裹，让它占据Row中除了左侧CircleAvatar之外的所有可用空间，这样文本就有了明确的宽度上限。
• 保持你原来的Text组件的maxLines:1、overflow设置（建议换成TextOverflow.ellipsis，溢出时显示省略号会更直观）。

修改后的完整代码： #

class _FeaturedCardState extends State<FeaturedCard>{
 @override
 Widget build(BuildContext context) {
 return InkWell(
 onTap: () {
 showToast(widget.name, context);
 },
 child: Padding(
 padding: EdgeInsets.only(top: 5.0),
 child: Container(
 height: MediaQuery.of(context).size.height / 9,
 width: MediaQuery.of(context).size.width,
 child: Card(
 shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
 elevation: 3.0,
 child: Row(
 children: <Widget>[
 Padding(
 padding: EdgeInsets.all(5.0),
 child: CircleAvatar(
 radius: 20,
 backgroundImage: AssetImage(widget.img),
 backgroundColor: Colors.transparent,
 ),
 ),
 SizedBox(width: 10),
 // 关键：添加Expanded包裹右侧内容
 Expanded(
 child: Padding(
 padding: EdgeInsets.fromLTRB(0.0, 3.0, 3.0, 3.0),
 child: Wrap(
 direction: Axis.vertical,
 children: <Widget>[
 SizedBox(height: 2),
 Text(
 widget.name,
 style: TextStyle(
 fontFamily: 'Montserrat',
 fontSize: 15,
 color: Colors.blueGrey,
 ),
 ),
 SizedBox(height: 3),
 Row(
 mainAxisAlignment: MainAxisAlignment.start,
 children: <Widget>[
 Icon(
 Icons.attach_money,
 size: 11,
 ),
 Text(
 widget.salary,
 style: TextStyle(
 fontSize: 10,
 fontFamily: 'Montserrat',
 color: Colors.blue[300]
 ),
 )
 ],
 ),
 SizedBox(height: 3),
 Text(
 widget.desc,
 style: TextStyle(
 fontFamily: 'Montserrat',
 fontSize: 12,
 ),
 maxLines: 1,
 softWrap: false,
 overflow: TextOverflow.ellipsis, // 换成省略号更直观展示溢出效果
 ),
 ],
 ),
 ),
 )
 ],
 ),
 ),
 ),
 ),
 );
 }
}

为什么这样能解决问题？ #

Row组件的子组件默认会根据自身内容大小布局，没有约束的话，文本会一直横向延伸直到超出屏幕。Expanded会强制子组件填充Row的剩余空间，给Wrap和里面的Text一个明确的宽度限制，这时Text的overflow设置才会生效，把超出部分隐藏或者显示省略号。

另外，如果你不需要Wrap的特性，把Wrap换成Column也是可以的，效果一样，代码会更简洁~

内容的提问来源于stack exchange，提问作者cleanrun