Flutter中SliverList内Text组件溢出文本显示省略号问题求助
解决SliverList中Text组件溢出截断不生效的问题
问题核心是Row布局里的Column没有宽度约束——Row会默认给子元素分配足够的空间,导致你的Text组件可以无限延伸,根本触发不了maxLines和overflow的规则。
直接改两处就能解决:
- 把包含姓名和文本的Column用
Expanded包裹,让它占据Row里除了头像和右侧时间之外的所有剩余空间 - 如果要显示省略号,把Text的
overflow改成TextOverflow.ellipsis(你当前用的fade只会淡出不会显示省略号)
修改后的完整代码:
SliverList( delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return Container( padding: EdgeInsets.symmetric(horizontal: screenWidth*0.05, vertical: screenHeight*0.01), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ CircleAvatar( backgroundImage: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScuQGyYbgV9HFyiunO9mF6_lnB6MYwcx6t3w&usqp=CAU"), radius: screenWidth*0.08, ), SizedBox(width: screenWidth*0.05,), // 添加Expanded包裹Column,限制宽度 Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Adam John", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 18.0, ), ), SizedBox(height: 5.0), Container( padding: const EdgeInsets.all(1), child: Text( "hello! my name is adam john and i'm your new tariner", maxLines: 1, // 修改为ellipsis显示省略号 overflow: TextOverflow.ellipsis, style: TextStyle( color: AppColors().darKShadowColor, fontSize: 16.0, ), ), ), ], ), ), Text( "10:30pm", style: TextStyle( color: AppColors().darKShadowColor, fontSize: 16.0, ), ), ], ), ); }, childCount: 3, ), ),
内容的提问来源于stack exchange,提问作者Zubair Naeem
相关产品推荐
相关产品推荐

