Flutter ListView的ListTile颜色溢出Container但文字正常问题求解

问题原因 #

Container组件默认不会根据自身设置的装饰圆角自动裁剪子组件内容，因此ListView内部ListTile的背景色会突破圆角边界显示，文字内容因为受Container布局约束才没有溢出。

解决方案 #

仅需在外层Container中添加clipBehavior属性，指定裁剪规则即可，无需修改现有其他布局逻辑，修改后代码如下：

Container(
  clipBehavior: Clip.antiAlias, // 新增这一行即可
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
    borderRadius: BorderRadius.circular(10),
  ),
  height: MediaQuery.of(context).size.height * 0.5,
  width: MediaQuery.of(context).size.width * 0.8,
  child: ListView.builder(
    itemCount: 20,
    itemBuilder: (ctx, index) => Column(
      children: [
        ListTile(
          tileColor: Colors.red,
          leading: Text("Test"),
        ),
        Divider()
      ],
    ),
  ),
)

属性说明 #

你可以根据需求选择不同的裁剪模式：

• Clip.hardEdge：裁剪速度最快，边缘会有轻微锯齿，性能消耗最低
• Clip.antiAlias：采用抗锯齿裁剪，圆角边缘更顺滑，视觉效果更好，是大部分场景的首选

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