在列表视图中保留选定的项目，颤振

Question

我有一个包含3个列表项的Listview，我需要选择一个项，然后将其保留为选中状态；如果单击另一个，则先前选择的项应取消选择，并且还要更改Container颜色，但是问题是像这样抛出错误

错误：

The getter 'isSelected' isn't defined for the class 'String'.
Try correcting the name to the name of an existing getter, or defining a getter or field named 'isSelected'.
        color: physical_status[index].isSelected ? Colors.red[100] : Colors.white,

Listview代码

 final List<String> physical_status = <String>['0', '1', '2'];
    bool isSelected = false;
      @override
      Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
     SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Container(
                            height: 110,
                            width: size.width,
                            child: ListView.builder(
                              shrinkWrap: true,
                              scrollDirection: Axis.horizontal,
                              itemBuilder: (BuildContext context, int index) {
                                return Padding(
                                  padding: const EdgeInsets.all(10.0),
                                  child: GestureDetector(
                                    onTap: () {
                                      print("clicked");
                                      setState(() {
                                        physical_status[index].isSelected = true;
                                      });
                                    },
                                    child: Container(
                                      width: 100,
                                      height: 100,
                                      color: physical_status[index].isSelected ? Colors.red[100] : Colors.white,
                                      decoration: new BoxDecoration(
                                        shape: BoxShape.circle,
                                        image: new DecorationImage(
                                            fit: BoxFit.cover,
                                            image: AssetImage(
                                                "assets/images/user_avatar.png")),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),

    }

Answer 1

您正在尝试从isSelectable列表元素访问physical_status属性。但是元素是字符串，String没有这种属性。

您需要分别存储selectedItems，或将physical_status列表转换为对象列表。

我会采用第一种方法：

final List<String> physical_status = <String>['0', '1', '2'];
Set<String> physical_status_selected = Set(); 
    bool isSelected = false;
      @override
      Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
     SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Container(
                            height: 110,
                            width: size.width,
                            child: ListView.builder(
                              shrinkWrap: true,
                              scrollDirection: Axis.horizontal,
                              itemBuilder: (BuildContext context, int index) {
                                return Padding(
                                  padding: const EdgeInsets.all(10.0),
                                  child: GestureDetector(
                                    onTap: () {
                                      print("clicked");
                                      setState(() {
                                        physical_status_selected.add(physical_status[index]);
                                      });
                                    },
                                    child: Container(
                                      width: 100,
                                      height: 100,
                                      decoration: new BoxDecoration(
                                        color: physical_status_selected.contains(physical_status[index]) ? Colors.red[100] : Colors.white,
                                        shape: BoxShape.circle,
                                        image: new DecorationImage(
                                            fit: BoxFit.cover,
                                            image: AssetImage(
                                                "assets/images/user_avatar.png")),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),

Answer 2

您可以使用bool列表而不是String，还可以使用另一个变量来管理当前选择的项目。

以下代码将为您提供更多帮助。

Object

Answer 3

将physical_status[index].isSelected更改为isSelected

也将color: isSelected ? Colors.red[100] : Colors.white,放在BoxDecoration内

SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Container(
                      height: 110,
                      width: size.width,
                      child: ListView.builder(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (BuildContext context, int index) {
                          return Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: GestureDetector(
                              onTap: () {
                                print("clicked");
                                setState(() {
                                  isSelected = true;
                                });
                              },
                              child: Container(
                                width: 100,
                                height: 100,
                                decoration: new BoxDecoration(
                                  color:
                                      isSelected ? Colors.red[100] : Colors.white,
                                  shape: BoxShape.circle,
                                  image: new DecorationImage(
                                      fit: BoxFit.cover,
                                      image: AssetImage(
                                          "assets/images/user_avatar.png")),
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),

您也可以创建一个这样的类。

class Item {
  final String physical_status;
  final bool isSelected;

  Item({this.physical_status, this.isSelected});
}

List<Item> itemList = <Item>[
    Item(
        physical_status: '1',
        isSelected: true),
    Item(
        physical_status: '2',
        isSelected: false),
    Item(
        physical_status: '3',
        isSelected: false),
  ];