如何在 Flutter 中仅更改列表视图的一个元素答案

【问题标题】：How to change just one element of the list view in Flutter如何在 Flutter 中仅更改列表视图的一个元素
【发布时间】：2021-03-04 23:37:09
【问题描述】：

我有一个 listView 从 Firestore 返回一些项目，我想在按下它时只更改一个容器的颜色，并在再次按下时将其更改回来。

我该怎么做？

我试图创建一个布尔值并改变它的值，但是改变了整个项目

这是我的代码：

return ListView(

  children: snapshot.data.docs.map<Widget>((DocumentSnapshot document) {
   return Container( child:Text('Hello')

  }).toList();
)

【问题讨论】：

标签： flutter listview dart android-listview

【解决方案1】：

您可以在数据列表中调用函数listWidget。

List<int> selected = [];
List<Widget> listWidget(List listItems) {
  List<Widget> listWidget = [];

  for (var i = 0; i < listItems.length; i++) {
    var iSeleted = selected.contains(i);
    var temp = GestureDetector(
      onTap: () {
        setState(() {
          if (iSeleted)
            selected.remove(i);
          else
            selected.add(i);
        });
      },
      child: Container(
        color: iSeleted ? sColor : nsColor,
        child: Text('Hello'),
      ),
    );
    listWidget.add(temp);
  }
  return listWidget;
}

您可以在此处将 sColor 设置为所选小部件所需的颜色，并将 nsColor 设置为未选择小部件。

List selected 将包含所有选定项目的索引。

【讨论】：

所以如何根据我的代码实现这个原因当我调用这个函数并给它参数（文档）会给我一个错误
您可以使用您拥有的文档列表调用此函数。像这样的东西：List<DocumentSnapshot> docs = snapshot.data.docs;listWidget(docs);

【解决方案2】：

您应该使用您的逻辑创建有状态小部件。单击项目应更改小部件状态。在这种情况下，小部件具有像 title 和 isSelected 这样的属性，这些属性被包装到 ListItem 类中。您需要的唯一逻辑基本上是
widget._listItem.isSelected = !_isSelected; in GestureDetector。下面的示例应该让您了解小部件状态。

class SelectableListItemWidget extends StatefulWidget {
  final ListItem _listItem;

  const SelectableListItemWidget(this._listItem);

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

class _SelectableListItemWidgetState extends State<SelectableListItemWidget> {
  String get _title => widget._listItem.title;

  bool get _isSelected => widget._listItem.isSelected;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          print('element: $_title has been clicked');
          widget._listItem.isSelected = !_isSelected;
        });
      },
      child: Container(
          color: _isSelected ? Colors.red : Colors.green,
          padding: const EdgeInsets.all(16),
          child: Text(
            _title,
            style: TextStyle(fontSize: 18),
          )),
    );
  }
}

class ListItem {
  String title;
  bool isSelected;

  ListItem(this.title, {this.isSelected = false});
}

可以使用新创建的小部件

  var items = [
    "Apple",
    "Cherimoya",
    "Grapefruit",
    "Jostaberry",
    "Plumcot",
    "Pomegranate",
    "Quince",
    "Kiwi",
    "Kiwano",
    "Huckleberry",
    "Marionberry",
    "Mango",
    "Strawberry",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: items
            .map((item) => SelectableListItemWidget(ListItem(item)))
            .toList(),
      ),
    );
  }

【讨论】：

老兄，我拥有的数组来自 FireStore 未修复
这只是一个例子，项目的来源并不重要。而不是items 使用你的snapshot.data.docs。