Flutter中Card包裹ListTile内容超出边界问题求助

问题原因 #

1. ListView.builder的prototypeItem使用原生ListTile，但实际渲染的是带Card的自定义组件，原型高度与实际item高度不匹配，导致ListView分配的空间不足，内容溢出。
2. Card默认内边距不足，使得内部ListTile的内容贴边甚至超出Card边界。

解决方案 #

方案一：修正ListView的原型项

将prototypeItem替换为自定义的CListItem，让ListView能准确计算每个item的高度：

ListView.builder(
  itemCount: 4,
  shrinkWrap: true,
  prototypeItem: const CListItem(text: 'Prototype'),
  itemBuilder: (context, index) {
    return CListItem(
      text: 'Upcoming Activity $index',
    );
  },
),

方案二：给Card添加内边距

在Card内部嵌套Padding组件，为ListTile和Card边界预留间距：

class CListItem extends StatelessWidget {
  final text;

  const CListItem({super.key, this.text});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: ListTile(
          title: Text(text),
          leading: Icon(Icons.calendar_today),
          subtitle: Text('23/12/2020'),
          trailing: Icon(Icons.arrow_forward_ios),
          onTap: () {},
        ),
      ),
    );
  }
}

方案三：优化滚动视图嵌套（可选）

如果页面无需外层SingleChildScrollView，可直接用ListView包含所有内容，避免嵌套滚动视图的布局冲突：

class _SummaryScreenState extends State<SummaryScreen> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        const HeadingWidget(text: 'Upcoming Activities'),
        ...List.generate(4, (index) => CListItem(text: 'Upcoming Activity $index')),
      ],
    );
  }
}

内容的提问来源于stack exchange，提问作者Emil C.