Flutter AlertDialog标题及操作栏后方区域显示异常求助

问题描述 #

使用AlertDialog作为应用筛选器时出现异常：标题后方与操作栏后方的区域会显示Tile，但Tile的文字被隐藏。尝试将所有子组件内边距设为0，问题仍未解决。

问题截图 #

原代码示例 #

AlertDialog(
  title: const Text('筛选条件'),
  content: SingleChildScrollView(
    child: Column(
      children: const [
        ListTile(title: Text('选项A')),
        ListTile(title: Text('选项B')),
        ListTile(title: Text('选项C')),
        // 更多筛选选项Tile
      ],
    ),
  ),
  actions: [
    TextButton(onPressed: () {}, child: const Text('取消')),
    TextButton(onPressed: () {}, child: const Text('确定')),
  ],
)

解决方法 #

给SingleChildScrollView添加clipBehavior: Clip.none,，同时给AlertDialog设置clipBehavior: Clip.hardEdge,，修改后的代码如下：

AlertDialog(
  clipBehavior: Clip.hardEdge, // 新增配置
  title: const Text('筛选条件'),
  content: SingleChildScrollView(
    clipBehavior: Clip.none, // 新增配置
    child: Column(
      children: const [
        ListTile(title: Text('选项A')),
        ListTile(title: Text('选项B')),
        ListTile(title: Text('选项C')),
        // 更多筛选选项Tile
      ],
    ),
  ),
  actions: [
    TextButton(onPressed: () {}, child: const Text('取消')),
    TextButton(onPressed: () {}, child: const Text('确定')),
  ],
)

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