Flutter ListView选中ListTile滚动后出现空白选中状态问题求助

这个问题源于ListView.builder的item复用机制，结合ListTile内置的selectedTileColor渲染逻辑导致——当列表项被滚出屏幕后复用，选中状态的背景色会出现残留，显示为空白蓝色块。

修改方案 #

把选中状态的背景色从ListTile移到外层的Container上，通过判断选中索引动态设置容器背景色，同时调整ListTile的相关属性：

修改后的完整代码 #

class SelectCountryScreen extends StatefulWidget {
  const SelectCountryScreen({super.key});

  @override
  State<SelectCountryScreen> createState() => _SelectCountryScreenState();
}

class _SelectCountryScreenState extends State<SelectCountryScreen> {
  // list for filtered countries
  List<Country> _filteredCountries = [];

  final List<Country> countries = Countries.all();

  TextEditingController searchController = TextEditingController();

  int _selectedIndex = -1;

  @override
  void initState() {
    super.initState();
    _filteredCountries = countries;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: Container(
        margin: const EdgeInsets.all(24),
        height: MediaQuery.of(context).size.height,
        width: double.infinity,
        child: Column(
          children: [
            SizedBox(
              height: 500,
              child: ListView.builder(
                itemCount: _filteredCountries.length,
                itemBuilder: ((context, index) {
                  final isSelected = _selectedIndex == index;
                  return Container(
                    margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 1),
                    decoration: BoxDecoration(
                      color: isSelected ? Theme.of(context).primaryColor : null,
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: ListTile(
                      visualDensity: const VisualDensity(vertical: -3),
                      contentPadding: const EdgeInsets.symmetric(
                        vertical: 0,
                        horizontal: 15,
                      ),
                      title: Text(
                        _filteredCountries[index].name!,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                              color: isSelected ? Colors.white : Theme.of(context).textTheme.bodySmall!.color,
                            ),
                      ),
                      leading: Text(
                        _filteredCountries[index].flagIcon!,
                        style: const TextStyle(fontSize: 26),
                      ),
                      onTap: () {
                        setState(() {
                          _selectedIndex = index;
                        });
                      },
                    ),
                  );
                }),
              ),
            ),
            PrimaryButton(
              label: "Next",
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• 替换选中样式实现：用外层Container的decoration.color控制选中背景色，彻底规避ListTile内部样式复用带来的残留问题
• 简化状态判断：用isSelected变量统一处理选中逻辑，减少重复代码
• 保留原有视觉效果：保留borderRadius设置，确保选中项的圆角样式和之前一致

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