flutter - 在颤动中单击时仅在 ListTile 中的一项上显示尾随图标

Question

基本上，我希望用户从列表中仅选择 1 个年龄，并在单击时显示Trailing IconListTile，当用户单击 other 时ListTile，该Trailing Icon应转移到该图块。

我得到了什么

我想要的是

我的ListView代码：

ListView.separated(
  itemCount: ageList.length,
  itemBuilder: (context, index) {
    return ItemWidget(
      item: ageList[index],
    );
  },
  separatorBuilder: (context, index) {
    return Divider(height: 0);
  },
),

我的列表平铺代码

 return ListTile(
  onTap: () {
    print("${widget.item.name} pressed");
    setState(() {
      // widget.item.clicked = !widget.item.clicked;
    });
    widget.item.clicked = !widget.item.clicked;
  },
  title: Padding(
    padding: const EdgeInsets.only(left: 6.0),
    child: Text(widget.item.name),
  ),
  trailing: Visibility(
    visible:  widget.item.clicked == null ? false : widget.item.clicked,
    child: Icon(
      Icons.done,
      color: Colors.white,
    ),
  ),
);

Answer 1

试试下面的代码希望它对你有帮助并且用过的一件事

声明 int var 和你的列表：

int? tappedIndex; 

  List<String> litems = [
    "Counter No 1",
    "Counter No 2",
    "Counter No 3",
    "Counter No 4"
  ];

声明 initState() 方法

 @override
  void initState() {
    super.initState();
    tappedIndex = 0;
  }

您的小部件：

 return Scaffold(
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      ListView.builder(
          shrinkWrap: true,
          itemCount: litems.length,
          itemBuilder: (context, index) {
            return Container(
                child: ListTile(
              trailing: Visibility(
                visible: tappedIndex == index,
                child: Icon(
                  Icons.done,
                  color: Colors.red,
                ),
              ),
              title: Text(litems[index]),
              onTap: () {
                setState(() {
                  tappedIndex = index;
                });
              },
            ));
          }),
    ],
  ),
);

您的结果屏幕->

Answer 2

然后您不需要在对象级别保存选择状态。您可以使用 int 类型的单个变量来处理它

int selectedAge = -1;
  _ageList(index){
    return ListTile(
      onTap: () {
        setState(() {
          selectedAge = index;
        });
      },
      title: Padding(
        padding: const EdgeInsets.only(left: 6.0),
        child: Text(widget.item.name),
      ),
      trailing: Visibility(
        visible:  selectedAge == index,
        child: Icon(
          Icons.done,
          color: Colors.white,
        ),
      ),
    );
  }

Answer 3

我们可以为选定的项目创建一个可为空的变量。虽然trailing可以为空，但我们不需要visibilty小部件来处理它。这是一个示例演示。

class Test extends StatefulWidget {
  Test({Key? key}) : super(key: key);

  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  int? selectedIndex;

  final ageList = List.generate(22, (index) => index);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: ageList.length,
      itemBuilder: (context, index) {
        return ListTile(
          onTap: () {
            setState(() {
              selectedIndex = index;
            });
          },
          title: Padding(
            padding: const EdgeInsets.only(left: 6.0),
            child: Text(ageList[index].toString()),
          ),
          trailing: index == selectedIndex
              ? const Icon(
                  Icons.done,
                  color: Colors.white,
                )
              : null,
        );
      },
      separatorBuilder: (context, index) {
        return Divider(height: 0);
      },
    );
  }
}