如何通过onTap事件修改ListTile的背景色、leading和trailing图标颜色？

要实现点击ListTile时切换背景色、leading和trailing图标颜色，你需要通过状态管理控制UI变化，具体实现如下：

1. 将组件改为StatefulWidget以维护点击状态
2. 定义布尔变量记录选中状态
3. 在点击回调中切换状态并触发UI更新
4. 根据状态动态设置背景色、图标颜色

修改后的完整代码示例：

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

  @override
  State<YourPage> createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: AppIcon.PERSON.copyWith(
        color: _isSelected ? AppColors.PRIMARY_COLOR : AppColors.DEFAULT_ICON_COLOR,
      ),
      trailing: Icon(
        Icons.arrow_right_alt_sharp,
        color: _isSelected ? AppColors.PRIMARY_COLOR : AppColors.DEFAULT_ICON_COLOR,
      ),
      onTap: () {
        setState(() {
          _isSelected = !_isSelected;
        });
      },
      selected: _isSelected,
      selectedTileColor: AppColors.PRIMARY_COLOR_20,
      selectedColor: AppColors.PRIMARY_COLOR,
      title: Text(
        'Edit Account',
        style: TextStyle(
          fontFamily: 'Inter',
          color: _isSelected ? AppColors.PRIMARY_COLOR : AppColors.DEFAULT_TEXT_COLOR,
        ),
      ),
    );
  }
}

关键说明： #

• selected属性绑定_isSelected后，selectedTileColor会自动作为选中时的背景色生效
• 如果AppIcon.PERSON是IconData类型，直接用Icon(AppIcon.PERSON, color: ...)即可；若是自定义Icon组件，确保它支持通过copyWith或参数修改颜色
• 替换DEFAULT_ICON_COLOR、DEFAULT_TEXT_COLOR为你项目中的默认颜色值即可

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