Flutter如何实现点击ListTile时仅选中项显示尾部Trailing Icon

你当前的实现是每个ListTile单独维护自身选中状态，所以会出现多选的问题，单选需要把选中状态统一交给父层ListView所在组件管理，按以下步骤修改即可： #

步骤1：父组件新增选中状态变量 #

在ListView所在的State类中新增变量存储当前选中的条目下标：

// 存储当前选中的年龄条目下标，未选择时为null
int? _selectedAgeIndex;

步骤2：修改ListView构建逻辑 #

给ItemWidget新增两个传参：当前条目是否选中、点击回调，修改后代码如下：

ListView.separated(
  itemCount: ageList.length,
  itemBuilder: (context, index) {
    return ItemWidget(
      item: ageList[index],
      // 传递当前条目的选中状态
      isSelected: _selectedAgeIndex == index,
      // 点击时更新父层选中下标
      onTap: () {
        setState(() {
          _selectedAgeIndex = index;
        });
      },
    );
  },
  separatorBuilder: (context, index) {
    return const Divider(height: 0);
  },
),

步骤3：修改ItemWidget定义和内部逻辑 #

首先调整ItemWidget的构造参数，新增isSelected和onTap：

class ItemWidget extends StatefulWidget {
  // 把下方的AgeItem替换成你自己的年龄条目实体类名
  final AgeItem item;
  final bool isSelected;
  final VoidCallback onTap;

  const ItemWidget({
    super.key,
    required this.item,
    required this.isSelected,
    required this.onTap,
  });

  // 其余原有代码保持不变
}

再修改ItemWidget内部的ListTile代码，移除自身维护的选中状态逻辑：

return ListTile(
  onTap: widget.onTap,
  title: Padding(
    padding: const EdgeInsets.only(left: 6.0),
    child: Text(widget.item.name),
  ),
  trailing: Visibility(
    visible: widget.isSelected,
    child: const Icon(
      Icons.done,
      color: Colors.white,
    ),
  ),
);

修改完成后点击任意条目，父层会统一更新选中下标，只有匹配下标的条目会显示对勾图标，自动实现单选切换效果。

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