Flutter如何实现上下圆角的ListTile列且子元素不溢出圆角边界

解决方案 #

你遇到的溢出问题本质是子组件的绘制区域没有被父容器的圆角边界剪裁，直接用下面的方案即可解决，同时满足悬停变色、整体圆角的需求：

方案一（更简洁，推荐） #

给承载整个Column的父容器同时设置clipBehavior和圆角即可，不需要单独处理首尾ListTile：

1. 外层用带圆角的Container包裹Column
2. 给Container加上clipBehavior: Clip.antiAlias属性，强制剪裁所有子组件的绘制范围贴合容器圆角
3. 不需要单独给ListTile设置tileColor，容器的背景色会直接透出来，如果需要不同ListTile单独设置背景色也不会溢出
   示例修正代码：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final children = List<Widget>.generate(
      5,
      (i) => ListTile(
          // 可单独设置tileColor也不会溢出
          tileColor: i%2 ==0 ? Colors.green : Colors.blue, 
          hoverColor: Colors.red, 
          title: Text('$i')));

  @override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.antiAlias, // 关键属性，强制剪裁子内容
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red),
        borderRadius: BorderRadius.circular(20),
        // 整体背景色可在这里设置
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: children,
      ),
    );
  }
}

方案二（如果你坚持要单独处理首尾元素） #

你当前的代码里，中间没有套Container的ListTile没有剪裁，而且首尾的Container的颜色会覆盖ListTile的tileColor，你需要给每个ListTile外层都套上带对应圆角、且设置了clipBehavior的容器，同时不要在容器上设置颜色，让ListTile的颜色透出来即可。

关键原理 #

Flutter默认不会对容器的子组件做边界剪裁，只有显式设置clipBehavior为非Clip.none的值时，才会将子组件超出容器边界的绘制内容裁掉，你之前的两种方案要么是没加剪裁，要么是只剪裁了首尾的ListTile，才会出现溢出问题。
之前你遇到的悬停色绘制在Container下方的问题，也是因为没有加剪裁导致的，加上clipBehavior属性后悬停效果会被限制在容器边界内展示。

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