如何为AlertDialog内的ListTile正确设置边框？

你之所以会遇到这个问题，是因为AlertDialog的shape参数是作用于整个对话框容器的，包括标题栏、内容区和操作按钮栏，直接设置它的话，边框就会覆盖这些区域的背景。要给内部的ListTile单独加边框，得把边框设置在ListTile的外层容器上，而不是AlertDialog本身。

方法一：给单个ListTile添加独立边框 #

用Container包裹每个ListTile，通过decoration属性设置边框，还能给每个选项加间距避免重叠：

AlertDialog(
  title: const Text('选择选项'),
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey, width: 1),
          borderRadius: BorderRadius.circular(4),
        ),
        child: const ListTile(
          title: Text('选项1'),
          leading: Icon(Icons.check),
        ),
      ),
      const SizedBox(height: 8),
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey, width: 1),
          borderRadius: BorderRadius.circular(4),
        ),
        child: const ListTile(
          title: Text('选项2'),
          leading: Icon(Icons.check),
        ),
      ),
    ],
  ),
  actions: [
    TextButton(onPressed: () {}, child: const Text('取消')),
    TextButton(onPressed: () {}, child: const Text('确定')),
  ],
)

方法二：给整个ListTile列表加统一边框 #

如果希望所有选项被一个整体边框包裹，把整个选项列表的Column放在带边框的Container里，还可以加分割线区分选项：

AlertDialog(
  title: const Text('选择选项'),
  content: Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey, width: 1),
      borderRadius: BorderRadius.circular(8),
    ),
    padding: const EdgeInsets.all(0), // 去掉默认padding避免边框内留空白
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: const [
        ListTile(
          title: Text('选项1'),
          leading: Icon(Icons.check),
        ),
        Divider(height: 1, indent: 16), // 分割线对齐ListTile内容
        ListTile(
          title: Text('选项2'),
          leading: Icon(Icons.check),
        ),
      ],
    ),
  ),
  actions: [
    TextButton(onPressed: () {}, child: const Text('取消')),
    TextButton(onPressed: () {}, child: const Text('确定')),
  ],
)

关键提醒 #

• 别再用AlertDialog的shape参数来给ListTile加边框了，这个参数管的是整个对话框的外形，包括标题和操作栏的背景区域，所以才会出现你看到的错误效果。
• 如果需要同时自定义对话框整体样式和内容区边框，可以调整AlertDialog的contentPadding参数，配合内容区的Container边框来实现更精细的布局。

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