在 Listview、Flutter 中保留所选项目答案

【问题标题】：Preserve Selected item in Listview, Flutter在 Listview、Flutter 中保留所选项目
【发布时间】：2020-05-19 13:10:21
【问题描述】：

我有一个包含 3 个列表项的列表视图，我需要选择一个项目，然后它应该保持选中状态，如果单击另一个之前选择的项目应该是未选择的，并且还更改了容器颜色，但问题是它抛出这样的错误

错误：

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,

列表视图代码

 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")),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),

    }

【问题讨论】：

什么是物理状态？添加与此相关的所有代码。检查 isSelected 的数据类型可能是 String 设为 bool。
我已经更新了问题，isSelected 它已经设置为布尔值，它在代码中@VirenVVarasadiya

标签： flutter flutter-layout

【解决方案1】：

您正在尝试从 physical_status 列表元素访问 isSelectable 属性。但是元素是字符串，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")),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),

【讨论】：

@Morbius 我的答案包含代码。你要我解释什么？
对不起，网络很慢，所以我在回复@Andrey Gordeev 时没有看到你的代码
它会抛出这样的错误type 'List<bool>' is not a subtype of type 'List<String>' of 'function result@Andrey Gordeev
我从 Viren V Varasadiya 的上述回答中得到了它，但谢谢你的帮助，伙计，这和你说的一样，但是 @Andrey Gordeev 的做法不同

【解决方案2】：

您可以使用布尔列表代替字符串，还可以使用另一个变量管理当前选择的项目。

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

 final List<bool> physical_status = <bool>[false, false, false];
  int currentSelectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: 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,
                itemCount: physical_status.length,
                itemBuilder: (BuildContext context, int index) {
                  return Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: GestureDetector(
                      onTap: () {
                        print("clicked");
                        setState(() {
                          physical_status[currentSelectedIndex] = false;
                          currentSelectedIndex = index;
                          physical_status[index] = true;
                        });
                      },
                      child: Container(
                        width: 100,
                        height: 100,
                        decoration: new BoxDecoration(
                          color: physical_status[index]
                              ? Colors.red[100]
                              : Colors.white,
                          shape: BoxShape.circle,
                          image: new DecorationImage(
                              fit: BoxFit.cover,
                              image: AssetImage("assets/images/user_avatar.png")),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

【讨论】：

抛出错误不能同时提供颜色和装饰要同时提供，请使用“装饰：BoxDecoration（颜色：颜色）”。 @Viren V Varasadiya

【解决方案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),
  ];

【讨论】：

感谢您的帮助，谢谢，但我是从上面的答案@Nick Romero 得到的