Flutter TextOverflow.visible不生效求助:需文本自动换行且Card占满空间
Flutter TextOverflow.visible 不生效的解决方案
问题根源:代码里的Row组件未给内部Column设置宽度约束,导致Column可无限延伸,Text组件无法感知边界,自然不会触发换行。Expanded包裹Card本身没问题,它只是让Card填充父组件可用空间,真正问题出在Row内部的布局约束。
解决方法:给Column组件套一层Flexible或Expanded,让它在Row中占据剩余可用宽度,这样Text就能获得明确的宽度限制,从而自动换行并完整显示内容。
修改后的代码:
Expanded( flex: 2, child: Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0), ), color: const Color(0XFFB0ADE2), margin: const EdgeInsets.symmetric(vertical: 5), elevation: 0, child: Padding( padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20), child: Row( children: <Widget>[ // 给Column套上Flexible,让它占据Row剩余空间 Flexible( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( 'text', style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 18, ), ), Text( 'subText very very long sentence to fit in one row and text.overflow visible is not working properly', // softWrap: true默认会自动换行,无需额外设置TextOverflow.visible softWrap: true, style: const TextStyle( fontSize: 12, ), ), ], ), ), ], ), ), ), )
补充说明:
Flexible允许子组件在必要时缩小(若Row有其他子元素),Expanded会强制子组件占据所有剩余空间,可根据实际需求选择。- 当
softWrap: true时,TextOverflow.visible属于冗余设置,softWrap已能实现文本自动换行。
内容的提问来源于stack exchange,提问作者Laddybug Little
相关产品推荐
相关产品推荐

