防止 ListView.Builder 为 FutureBuilder 中的特定 ListItem 更改重建

Question

我正在从 sqflite 数据库查询数据并使用 futurebuilder 来显示令人耳目一新的图标。 一旦通过snapshot.connectionState == ConnectionState.done 检索到数据，我就会调用ListView.builder 方法来显示数据。 我在显示的每个列表项中也有一个图标。 单击该项目后，我正在切换数据库中的列值。 因为我还需要在每次点击时切换 ui 中的图标。 为此，在更新数据库后，我调用了 setstate。 这会切换 ui 中的图标，但由于 setstate，整个项目列表正在重建。 我怎样才能避免这种情况？我只希望更改该特定列表项的图标。 Provider 是实现这一目标的推荐方法吗？

  class _HomeState extends State<Home> {
  final _dbHelper = DatabaseHelper.instance;
  
  
    Future<int> _toggleFavourite(int id, int value) async {
    return await _dbHelper.updateFavourite(id, value);- //toogles the column value in db
  }
  
  
   @override
  Widget build(BuildContext context) {
    return Scaffold(
   body: FutureBuilder(
              future: _dbHelper.queryAllRows(),//Get all rows from db
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  final _allRows = snapshot.data as List<Map<String, dynamic>>;
                  _codes.clear();
                  _allRows.forEach((row) => _codes.add(Code.fromMap(row)));
                  
                   return SafeArea(
                    child: Column(
                      children: [
                        Expanded(
                          child:ListView.builder(
                                  padding: const EdgeInsets.all(8),
                                  itemCount: _codes.length,
                                  itemBuilder:
                                      (BuildContext context, int index) {
                                    return InkWell(
                                        onTap: () {
                                                                                 },
                                        child: Card(
                                         
                                            child: ListTile(
                                           
                                              title: Text(
                                                _codes[index].code,
                                                maxLines: 1,
                                                overflow: TextOverflow.ellipsis,
                                                softWrap: false,
                                              ),
                                            trailing: SizedBox(
                                                width: 100,
                                                child: Row(
                                                  children: [
                                                    IconButton(
                                                        onPressed: () {
                                                          _toggleFavourite(
                                                                  _codes[index]
                                                                      .id,
                                                                  _codes[index]
                                                                              .favourite ==
                                                                          1
                                                                      ? 0
                                                                      : 1)
                                                              .then(
                                                                  (affectedRows) {
                                                            if (affectedRows >
                                                                0) {
                                                              setState(() {});//Rebuilds all the listitems :(
                                                            }
                                                            
                                                          });
                                                        },
                                                        icon: Icon(
                                                          _codes[index]
                                                                      .favourite ==
                                                                  1
                                                              ? Icons.favorite
                                                              : Icons
                                                                  .favorite_border_outlined,
                                                          size: 35,
                                                        )),
                                                        
                                                        .........
                                                    
                                                    
                                                    

Answer 1

为ListView项目创建一个单独的小部件，并在该新小部件中具有数据库和切换功能。

此外，Flutter 始终建议使用const关键字，该关键字不会为特定小部件再次重建。

编辑：

创建单独的StatefulWidget因为您必须切换功能

例如：在新的StatefulWidget小部件中包含InkWell整个块，并在那里实现您的实现

   InkWell(
          onTap: () {
                                                                                 
          },
     child: Card( 
          ///......
          )

---

否则，如果 FutureBuilder 多次触发，请参考博客https://medium.com/flutterworld/why-future-builder-called-multiple-times-9efeeaf38ba2