如何在 ListTile 上进行点击选择？

Question

我的屏幕上显示了美国各州。它们使用 ListView 显示。我需要做到这一点，以便当您单击其中一个状态时，会出现一个复选标记。现在，我在尾部添加了一个图标，但是当您单击一种状态时，所有状态上都会出现一个复选标记。如何实施？

class _AddStatePageState extends State<AddStatePage> {
  static const List<String> _usaStates = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    ...
  ];
  
  @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(
              trailing: Image.asset(
                Assets.assetsCheckmark,
                width: 13,
                height: 10,
              ),
              title: Text(
                _usaStates[index],
              ),
            );
          },
          separatorBuilder: (context, index) {
            return const Divider();
          },
        ),
      ),
    );
  }
}

Answer 1

沿着这些思路：

class _AddStatePageState extends State<AddStatePage> {
  static const List<String> _usaStates = [
    'Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    ...
  ];

  static const List<bool> _usaStatesSelected = [false, false, true, ...];
  
  @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(() {
                 for(var i = 0; i < _usaStatesSelected.length; i++) {
                   _usaStatesSelected[i] = false;
                 }
                 _usaStatesSelected[index] = true;
               });
              },
              trailing:  
                _usaStatesSelected[index] == false
                ? SizedBox.shrink() 
                : Image.asset(
                    Assets.assetsCheckmark,
                    width: 13,
                    height: 10,
                  ),
              title: Text(
                _usaStates[index],
              ),
            );
          },
          separatorBuilder: (context, index) {
            return const Divider();
          },
        ),
      ),
    );
  }
}