Flutter中如何在ListTile内放置正方形容器？问题排查与方案咨询

问题原因 #

ListTile的leading区域有内置尺寸约束，默认会限制其高度与ListTile自身高度一致、宽度也有上限，你直接设置height:100和width:100会被这个约束覆盖，导致容器被压缩成矩形。

修复ListTile的实现 #

方法一：用AspectRatio强制正方形比例 #

通过AspectRatio设置宽高比为1:1，确保容器始终是正方形：

leading: AspectRatio(
  aspectRatio: 1,
  child: Container(
    color: Colors.green,
  ),
)

方法二：用ConstrainedBox固定尺寸 #

通过ConstrainedBox突破ListTile的约束，强制设置宽高：

leading: ConstrainedBox(
  constraints: BoxConstraints.tightFor(width: 100, height: 100),
  child: Container(color: Colors.green),
)

另外你给title和subtitle加的left:45内边距可以去掉，修复后leading尺寸正常，无需额外偏移内容。

替代组件：自定义Row列表项 #

如果ListTile的默认约束限制太多，直接用Row自定义列表项灵活性更高，完全不受ListTile的约束限制：

return Container(
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.white),
    borderRadius: BorderRadius.circular(5),
  ),
  child: Row(
    children: [
      Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
      SizedBox(width: 16),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text(
              "Title",
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 4),
            Text("Subtitle"),
          ],
        ),
      ),
    ],
  ),
);

SingleChildScrollView的适用性 #

SingleChildScrollView是基础滚动组件，和你当前遇到的leading显示问题无关。你现在用的ListView.separated已经是专门的列表滚动组件，支持懒加载，适合数据量大的场景；如果列表项数量很少，用SingleChildScrollView包裹Column也可以，但核心问题还是列表项的布局，不是滚动组件的选择。

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