如何让ListTile标题内容不受Leading长度影响保持同一垂直线?
Flutter ListTile 标题文本对齐问题
我用以下代码实现了一个ListTile:
child: ListTile( leading: Padding( padding: EdgeInsets.only(top: 4, left: 12, bottom: 4), child: Text(department, style: TextStyle(color: Colors.white)), ), contentPadding: EdgeInsets.only(top: 4, left: 12, bottom: 4), title: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(name, style: TextStyle(color: Colors.white)), Text(number, style: TextStyle(color: Colors.white)), ], ),
现在需要让标题区域的name和number文本始终保持同一垂直线,不受department文本长度的影响。尝试过设置最大宽度,但对于较短的department无效。当前布局效果如下:
解决方法
方法1:给Leading设置固定宽度
ListTile的Leading默认是自适应宽度,导致Title的起始位置会随Leading宽度变化。给Leading嵌套一个固定宽度的SizedBox,就能让Title区域的起始位置保持一致:
child: ListTile( leading: SizedBox( width: 80, // 根据实际需求调整宽度 child: Padding( padding: EdgeInsets.only(top: 4, left: 12, bottom: 4), child: Text(department, style: TextStyle(color: Colors.white)), ), ), contentPadding: EdgeInsets.only(top: 4, left: 12, bottom: 4), title: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(name, style: TextStyle(color: Colors.white)), Text(number, style: TextStyle(color: Colors.white)), ], ), )
方法2:用Row替代ListTile默认布局
如果不想固定Leading宽度,可以直接用Row构建整个条目,让Title区域通过Expanded占满剩余空间,确保文本对齐:
child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: EdgeInsets.only(top: 4, left: 12, bottom: 4, right: 12), child: Text(department, style: TextStyle(color: Colors.white)), ), Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(name, style: TextStyle(color: Colors.white)), Text(number, style: TextStyle(color: Colors.white)), ], ), ), ], )
内容的提问来源于stack exchange,提问作者MatsL
相关产品推荐
相关产品推荐

