ListView Flutter 的单选

Question

我正在尝试listView在我的应用程序中实现单个选择，以便一旦点击列表中的项目，按下的项目颜色状态就会与其他项目不同。我已经做了我所知道的一切，但效果并不好。问题是，即使我的实现在按下时更新每个项目的状态，它也不会将其他项目重置为其初始状态。

class BoxSelection{
  bool isSelected;
  String title;
  String options;
  BoxSelection({this.title, this.isSelected, this.options});
}


class _AddProjectState extends State<AddProject> {
  List<BoxSelection> projectType = new List();
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    projectType
        .add(BoxSelection(title: "Building", isSelected: false, options: "A"));
    projectType
        .add(BoxSelection(title: "Gym House", isSelected: false, options: "B"));
    projectType
        .add(BoxSelection(title: "School", isSelected: false, options: "C"));
  }

  child: ListView.builder(
                      itemCount: projectType.length,
                      itemBuilder: (BuildContext context, int index) {
                        return GestureDetector(
                          onTap: () {
                            setState(() {
       //here am trying to implement single selection for the options in the list but it don't work well
                              for(int i = 0; i < projectType.length; i++) {
                                if (i == index) {
                                  setState(() {
                                    projectType[index].isSelected = true;
                                  });
                                } else {
                                  setState(() {
                                    projectType[index].isSelected = false;
                                  });
                                }
                              }
                            });
                          },
                          child: BoxSelectionButton(
                            isSelected: projectType[index].isSelected,
                            option: projectType[index].options,
                            title: projectType[index].title,
                          ),
                        );
                      },
                    ),

Answer 1

你的问题是你正在使用index访问projectType元素，但你应该使用i

if (i == index) {
    setState(() {
    projectType[i].isSelected = true;
    });
} else {
    setState(() {
    projectType[i].isSelected = false;
    });
}  

无论如何，我认为您的代码可以改进，因为它没有达到应有的效率。您将迭代整个列表，并setState在每次迭代中调用两次，在一次即可完成的情况下多次不必要地重新创建小部件树。

1. 将当前选择保存在类级别变量中

   BoxSelection _selectedBox
   

2. 简化代码以直接对当前选择进行操作，而不是迭代整个列表

    onTap: () =>
      setState(() {
        if (_selectedBox != null) {
            _selectedBox.isSelected = false;
        }
        projectType[index].isSelected = !projectType[index].isSelected;
        _selectedBox = projectType[index];
      });