Flutter：ListView.builder 多次显示列表项

Question

我使用 ListView.builder 创建了 3 个要显示的列表项...但是在编码后，listView 显示 1 个项目 3 次，然后我向列表添加了更多项目，使其总共有 5 个项目，然后我发现它在显示下一个项目之前开始显示每个项目 5 次，我还注意到它不可滚动

下面是代码

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

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

class _ListsState extends State<Lists> {
  List<ItemLists> itemsL = [
    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,
    ),
    ItemLists(
      title: 'Best Danced',
      discription: 'Black Camaru',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Performance',
      discription: 'ShofeniWere',
      favorite: false,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
        children: itemsL.map((items) {
      return Container(
        child: ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: itemsL.length,
          itemBuilder: (context, index) {
            return Dismissible(
              key: ObjectKey(itemsL[index]),
              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.calendar_today), onPressed: null),
              )),
            );
          },
        ),
      );
    }).toList());
  }
}

下面是我的列表模型

class ItemLists {
  String title;
  String discription;
  bool favorite;

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

下面是截图

Answer 1

您使用 map 函数创建多个 ListView.builders，这是解决方案：

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

class _ListsState extends State<Lists> {
  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,
    ),
    ItemLists(
      title: 'Best Danced',
      discription: 'Black Camaru',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Performance',
      discription: 'ShofeniWere',
      favorite: false,
    ),
    
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Dismissible(
            key: ObjectKey(items[index]),
            child: Card(
                child: ListTile(
              leading: new IconButton(
                  icon: Icon(
                    Icons.star,
                    color: items[index].favorite ? Colors.green : Colors.grey,
                  ),
                  tooltip: 'Add to Favorite',
                  onPressed: () {
                    setState(() {
                      items[index].favorite = !items[index].favorite;
                    });
                  }),
              title: Text('${items[index].title}'),
              subtitle: Text('${items[index].discription}'),
              trailing:
                  IconButton(icon: Icon(Icons.calendar_today), onPressed: null),
            )),
          );
        },
      ),
    );
  }
}

Answer 2

这是因为您的 itemsL 正在将其每个数据映射到 ListView.Builder。 ListView.Builder 有自己的遍历列表的方式...所以 itemsL.map((items) 不是必需的...相反，您应该以这种方式进行

你在哪里使用 index 的 ListView.builder

ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: itemsL.length,
          itemBuilder: (context, index) {
            return Dismissible(
              key: ObjectKey(itemsL[index]),
              child: Card(
                  child: ListTile(
                leading: new IconButton(
                    icon: Icon(
                      Icons.star,
                      // using the index of listViewBuilder
                      color: itemsL[index].favorite ? Colors.green : Colors.grey,
                    ),
                    tooltip: 'Add to Favorite',
                    onPressed: () {
                      setState(() {
                        items.favorite = !items.favorite;
                      });
                    }),
                //same over here
                title: Text('${itemsL[index].title}'),
                subtitle: Text('${itemsL[index].discription}'),
                trailing: IconButton(
                    icon: Icon(Icons.calendar_today), onPressed: null),
              )),
            );
          },
        ),
      );

Flutter：ListView.builder 多次显示列表项

Flutter: ListView.builder displaying List items multiple times

flutter

android-listview

flutter-layout

flutter-test