Flutter：所有 ListTile 项目都响应相同的点击

Posted 2023-02-23

【中文标题】Flutter：所有 ListTile 项目都响应相同的点击

【英文标题】：Flutter: All ListTile Items responding same click

【发布时间】：2021-07-09 20:30:22

【问题描述】：

我是 Flutter 的新手，所以我试图构建一个可滚动的 listtile 对象。因此，在构建它之后，我尝试让图标按钮在按下时改变颜色，但当我按下一个按钮时，它会改变所有项目的颜色。我想这与为每个项目分配一个唯一的 id/key 有关，但不确定这是否是问题，甚至是如何做到这一点。代码如下：

class Lists extends StatefulWidget 
  @override
  _ListsState createState() => _ListsState();


class _ListsState extends State<Lists> 
  Color _statusColor = Colors.grey;

  List<ItemLists> items = [
    ItemLists(
      title: 'Best Music of the Year',
      discription: 'Davido',
    ),
    ItemLists(
      title: 'Best Album Cover design',
      discription: 'Brighter Press',
    ),
    ItemLists(
      title: 'Best Vocalist',
      discription: 'Simi-Sola',
    ),
  ];
  @override
  Widget build(BuildContext context) 
    return Column(
        children: items.map(
              (items) 
            return Container(
                child: Card(
                    child: ListTile(
                      leading: new IconButton(
                          icon: Icon(
                            Icons.star,
                            color: _statusColor,
                          ),
                          tooltip: 'Add to Favorite',
                          onPressed: () 
                            setState(() 
                              if (_statusColor == Colors.grey) 
                                _statusColor = Colors.green;
                               else 
                                _statusColor = Colors.grey;
                              
                            );
                          ),
                      title: Text('$items.title'),
                      subtitle: Text('$items.discription'),
                      trailing: IconButton(icon: Icon(Icons.delete), onPressed: null),
                    )));
          ,
        ).toList());
  

提前致谢。

下面是修改后的代码

class Lists extends StatefulWidget 
  @override
  _ListsState createState() => _ListsState();


class _ListsState extends State<Lists> 
  Color _statusColor = Colors.grey;

  List<ItemLists> items = [
    ItemLists(
      title: 'Best Music of the Year',
      discription: 'Davido',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Album Cover design',
      discription: 'Brighter Press',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Vocalist',
      discription: 'Simi-Sola',
      favorite: false,
    ),
  ];
  @override
  Widget build(BuildContext context) 
    return Column(
        children: items.map(
              (items) 
            return Container(
                child: Card(
                    child: ListTile(
                      leading: new IconButton(
                          icon: Icon(
                            Icons.star,
                            color: items.favorite ? Colors.green : Colors.grey,
                          ),
                          tooltip: 'Add to Favorite',
                          onPressed: () 
                            setState(() 
                              items.favorite = !items.favorite;
                            );
                          ),
                      title: Text('$items.title'),
                      subtitle: Text('$items.discription'),
                      trailing: IconButton(icon: Icon(Icons.delete), onPressed: null),
                    )));
          ,
        ).toList());
  

那么下面是我的数据模型

class ItemLists 
  String title;
  String discription;
  bool favorite;

  ItemLists(this.title, this.discription, this.favorite);

我想做的是一个待办事项应用程序，用户可以在完成特定任务后轻松单击星形图标按钮。

【参考方案1】：

这是因为您只为列表中的所有项目分配了一个颜色变量；如果该变量发生变化，所有项目也会发生变化。

有不同的方法来解决这个问题；一种可能的解决方案是向您的“项目列表”对象添加另一个属性：

List<ItemLists> items = [
ItemLists(
  title: 'Best Music of the Year',
  discription: 'Davido',
  favorite: false,  // add this as a boolean to indicate if the item is a favorite or not
),

然后像这样更改您的卡：

 return Container(
          child: Card(
              child: ListTile(
        leading: new IconButton(
            icon: Icon(
              Icons.star,
              color: items.favorite ? Colors.green : Colors.grey,  // change this
            ),
            tooltip: 'Add to Favorite',
            onPressed: () 
              setState(() 
                items.favorite = !items.favorite; // and change this
              );
            ),
        title: Text('$items.title'),
        subtitle: Text('$items.discription'),
        trailing: IconButton(icon: Icon(Icons.delete), onPressed: null),
      )));

这应该可行。

【讨论】：

我更改了它们，但得到了这个错误[断言失败：布尔表达式不能为空]

这个错误出现在哪里？您是否将“false”分配给收藏属性或使用“false”作为默认值？

我将编辑最初的问题并添加新代码

你能看一下stacktrace并检查错误发生在哪里吗？我复制了上面的代码，它对我有用，没有任何问题。

它现在正在工作......我只需要重新启动我的系统，现在一切正常