Flutter实现Row行末位置图标文本适配:短文本居右、长文本省略
解决方案
核心是通过Expanded+Flexible组合分配Row的布局空间,同时控制文本溢出逻辑,调整后代码如下:
locationView() { return Padding( padding: const EdgeInsets.fromLTRB(16, 20, 16, 0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ // 左侧标题区域保持不变 Row( mainAxisAlignment: MainAxisAlignment.start, children: [ bellazTitle("Hey, Emily", 22), ], ), const SizedBox(width: 10,), // 改动1:用Expanded包裹右侧整个位置区域,仅占用左侧标题剩下的可用宽度 Expanded( child: Row( // 改动2:右侧区域内容右对齐,短文本时图标+文本整体靠最右展示 mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.center, children: [ Image.asset( "lib/Assets/location.png", height: 22, width: 16, ), if (featureName != null) Padding( padding: const EdgeInsets.only(left: 8.0), // 改动3:用Flexible包裹文本,限制文本最大宽度不超出父容器剩余空间 child: Flexible( child: Text( "${featureName}, ${locality}", style: TextStyle( color: apptitleColor, fontSize: t4Size, ), maxLines: 1, overflow: TextOverflow.ellipsis, ), ), ) ], ), ) ], ), Padding( padding: const EdgeInsets.only(top: 2.0), child: Text( "Welcome to Bellaz!", style: TextStyle( color: extraLightColor, fontSize: t5Size, ), ), ) ], ), ); }
适配逻辑说明
- 地址较短时:
Expanded分配的剩余宽度足够完整展示图标+文本,MainAxisAlignment.end让整体内容靠右侧展示 - 地址较长时:
Flexible限制文本最大宽度为Expanded分配宽度减去图标宽度,超出部分自动触发省略号,不会挤压左侧标题区域,也不会出现布局溢出
内容的提问来源于stack exchange,提问作者Deepak
相关产品推荐
相关产品推荐

