如何在使用 ListView.builder 时动态更新特定的列表视图项？

Question

我正在 Flutter 中制作列表视图。我想在长按项目时更新项目的属性。

以下是完整的代码：

// main.dart
import 'package:LearnFlutter/MyList.dart';
import 'package:flutter/material.dart';
import 'MyList.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'My list demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: MyList(),
    );
  }
}

// MyList.dart
import 'package:flutter/material.dart';

class Item {
  Item(String name, bool selected, Color color) {
    _name = name;
    _selected = selected;
    _color = color;
  }

  String _name;
  bool _selected;
  Color _color;

  String getName() {
    return _name;
  }

  bool isSelected() {
    return _selected;
  }

  void toggleSelected() {
    _selected = !_selected;
  }

  void setColor(Color color) {
    _color = color;
  }

  Color getColor() {
    return _color;
  }
}

class MyList extends StatefulWidget {
  @override
  _CardyState createState() => new _CardyState();
}

class _CardyState extends State<MyList> {
  @override
  Widget build(BuildContext context) {
    var itemsList = [
      Item('My item1', false, Colors.grey[200]),
      Item('My item2', false, Colors.grey[200]),
      Item('My item3', false, Colors.grey[200]),
    ];

    return ListView.builder(
      itemCount: itemsList.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            leading: Icon(Icons.train),
            title: Text(itemsList[index].getName()),
            trailing: Icon(Icons.keyboard_arrow_right),
            tileColor: itemsList[index].getColor(),
            selected: itemsList[index].isSelected(),
            onLongPress: () {
              toggleSelection(itemsList[index]);
            },
          ),
        );
      },
    );
  }

  void toggleSelection(Item item) {
    print(item.getName() + ' long pressed');
    setState(() {
      item.toggleSelected();
      if (item.isSelected()) {
        item.setColor(Colors.blue[200]);
      } else {
        item.setColor(Colors.grey[200]);
      }
    });
  }
}

问题：
在上面的代码中，toggleSelection 在长按事件中被调用。但是该项目的颜色不会更新。我做错了什么？

Answer 1

它无法正常运行的主要原因是您的班级Item 中没有状态，因此您没有重新构建/更新任何东西。如果你想在课堂上处理它，那么你需要将它扩展到ChangeNotifier。您还需要使用ChangeNotifierProvider，查看文档以获取帮助：https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

您将需要提供程序包：https://pub.dev/packages/provider

类项

class Item extends ChangeNotifier {
  Item(String name, Color color) {
    _name = name;
    _color = color;
  }

  int selectedIndex; // to know active index
  String _name;
  Color _color;

  String getName() {
    return _name;
  }

  void toggleSelected(int index) {
    selectedIndex = index;

    notifyListeners(); // To rebuild the Widget
  }

  void setColor(Color color) {
    _color = color;

    notifyListeners();
  }

  Color getColor() {
    return _color;
  }
}

小部件列表

class MyList extends StatefulWidget {
  @override
  _CardyState createState() => new _CardyState();
}

class _CardyState extends State<MyList> {
  @override
  Widget build(BuildContext context) {
    final items = Provider.of<Item>(context); // Accessing the provider

    bool selected = false; // default val. of bool

    var itemsList = [
      Item('My item1', Colors.grey[200]),
      Item('My item2', Colors.grey[200]),
      Item('My item3', Colors.grey[200]),
    ];

    return ListView.builder(
      itemCount: itemsList.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            leading: Icon(Icons.train),
            title: Text(itemsList[index].getName()),
            trailing: Icon(Icons.keyboard_arrow_right),
            tileColor: items.selectedIndex == index
                ? items.getColor()
                : Colors.grey[200],
            selected: items.selectedIndex == index ? true : false,
            onLongPress: () {
              setState(() => selected = !selected);

              items.toggleSelected(index);

              if (selected) {
                items.setColor(Colors.red);
              }
            },
          ),
        );
      },
    );
  }
}

Answer 2

将MyList 制作成一个无状态小部件，保留它应该在HomePage 中显示的所有数据，statefull widget 包括有关所选项目的数据。然后将数据传入MyList

您的 MyList 可能是这样的

class MyList extends StatelessWidget {
  final List<Item> items;
  final List<int> selectedItemIdList;
  final void Function(Item) onLongClick;

  MyList(this.items, this.selectedItemIdList, this.onLongClick);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, position) {
        //remember all you need to do here is to create your item based on the data you have
        var item = items[position];
        var isSelected = items.firstWhere((element) => item.id == element.id) != null;
        if (isSelected) {
          //build and return a widget with selected look
        } else {
          return GestureDetector(
            onLongPress: () => onLongClick(item), //changes data in homepage then MyList will be updated automatically
            child: Container(
              //rest of your widget
            ),
          );
        }
      },
      itemCount: items.length,
    );
  }
}

在您的 HomePageState 中

//all the data the list it build from should be stored here not inside the list. and 

List<Item> items = [ ... ];
List<int> selectedItemIdList = [ ... ];

//MyList is just a Stateless widget that only shows this data change (a very DUMB view as one could say)

  @override
  Widget build(BuildContext context) {
        return MyList(items, selectedItemIdList, (item) { 
            setState((){
               selectedItemIdList.add(item.id);
            });
        });
  }