Flutter如何实现点击ListTile选中时仅该项显示勾选标记

出现所有列表项默认显示勾选、点击后无法单独选中单项的问题，核心是两处逻辑缺失：

• 未定义状态变量存储当前选中项的标识，且代码默认给所有ListTile的trailing属性都赋值了勾选图标，没有做「仅选中项显示图标」的条件判断
• 未给列表项绑定点击交互逻辑，点击后不会更新选中状态、触发UI重绘

1. 在State类中新增可空整型变量_selectedStateIndex，用于存储当前选中的列表项索引，初始值为null（即默认无选中项）
2. 给每个ListTile配置onTap点击回调：点击时将_selectedStateIndex赋值为当前项的索引，调用setState触发界面刷新
3. 调整trailing属性的渲染逻辑：只有当前项索引和_selectedStateIndex的值相等时，才渲染勾选图标，否则返回null（不显示尾部内容）

class _AddStatePageState extends State<AddStatePage> {
  static const List<String> _usaStates = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    // 补全剩余州列表数据即可
  ];
  // 记录当前选中的列表项索引，null代表无选中
  int? _selectedStateIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBarWithSearch(
        appBarTitle: 'Add State',
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 24),
        child: ListView.separated(
          itemCount: _usaStates.length,
          itemBuilder: (context, index) {
            return ListTile(
              // 点击更新选中状态
              onTap: () {
                setState(() {
                  _selectedStateIndex = index;
                });
              },
              // 仅选中项显示勾选图标
              trailing: _selectedStateIndex == index
                  ? Image.asset(
                      Assets.assetsCheckmark,
                      width: 13,
                      height: 10,
                    )
                  : null,
              title: Text(
                _usaStates[index],
              ),
            );
          },
          separatorBuilder: (context, index) {
            return const Divider();
          },
        ),
      ),
    );
  }
}

• 如果需要设置默认选中项，只需要在State初始化时给_selectedStateIndex传入对应项的索引即可
• 如果需要支持「点击已选中项取消勾选」的效果，只需要在onTap回调中增加判断：如果当前点击的索引和已选中索引相等，就把_selectedStateIndex重置为null
• 如果业务需要存选中的州名而不是索引，也可以把状态变量改成String?类型，存对应项的州名字符串做判断即可

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