flutter - 为什么ListViewBuilder显示重复值？

Question

我编写了以下简单的应用程序来查询数据库。我正在尝试使用listviewbuilder在不同卡上显示每个节目名称。我知道我的数据库中有两次表演，所以我应该有两张牌(权力游戏和 super 碗)。那为什么要显示4张牌(下面的截图)？谢谢您的帮助!

// This is the model class
class Mod {
  final String name;
  final String nextEpisode;
  final String prevEpisode;

  Mod(this.name, this.nextEpisode, this.prevEpisode);

  Mod.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        nextEpisode = json['nextEpisode'],
        prevEpisode = json['prevEpisode'];
}

// This is the screen class
class FTest2 extends StatefulWidget {
  @override
  _FTest2State createState() => _FTest2State();
}

class _FTest2State extends State<FTest2> {
  List<Mod> list = List();
  final showNameList = List();

  Future MakeCall() {
    final mainReference = FirebaseDatabase.instance.reference().child('shows');
    mainReference.once().then((DataSnapshot dataSnapshot) {
      Map<dynamic, dynamic> values = dataSnapshot.value;
//      print(values.toString());
      values.forEach((key, value) {
        showNameList.add(value['name']);
      });
      print(showNameList);
    });
  }

/*  MakeCall() {
    final mainReference = FirebaseDatabase.instance.reference().child('shows');
    mainReference.once().then((DataSnapshot dataSnapshot){
      Map<dynamic,dynamic> values = dataSnapshot.value;
      print(values.toString());
      values.forEach((key, value) {
//        print(key);
        print(value['name']);
      });
    });
  }*/

  void getData() {
    MakeCall();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('This is App Bar for the FB Test'),
        actions: <Widget>[
          FlatButton.icon(
            icon: Icon(Icons.pages, color: Colors.white),
            label: Text('Query', style: TextStyle(color: Colors.white)),
            onPressed: () {
              getData();
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 10.0),
          FutureBuilder(
              future: MakeCall(),
              builder: (context, mainReference) {
/*                if (mainReference.hasData == null) {
                  return Container();
                }*/
                return ListView.builder(
                    shrinkWrap: true,
                    itemCount: showNameList.length,
                    itemBuilder: (context, index) {
                      return Card(
                        child: ListTile(
                          title: Text(showNameList[index]),
                        ),
                      );
                    });
              }),
        ],
      ),
    );
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码

步骤1:为避免FutureBuilder不必要地重建https://github.com/flutter/flutter/issues/11426#issuecomment-416170661

Future _future;

@override
  void initState() {
    _future = MakeCall();
    super.initState();
  }

FutureBuilder(
              future: _future,
              builder: (context, mainReference) {  

步骤2:如果 MakeCall()应该总是返回相同的数据
您需要在 showNameList.clear();中调用 MakeCall()以避免添加重复值
我无法模拟这种情况，它基于您的数据

工作演示



完整的代码

import 'package:flutter/material.dart';
class Mod {
  final String name;
  final String nextEpisode;
  final String prevEpisode;

  Mod(this.name, this.nextEpisode, this.prevEpisode);

  Mod.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        nextEpisode = json['nextEpisode'],
        prevEpisode = json['prevEpisode'];
}

// This is the screen class
class FTest2 extends StatefulWidget {
  @override
  _FTest2State createState() => _FTest2State();
}

class _FTest2State extends State<FTest2> {
  List<Mod> list = List();
  final showNameList = List();
  Future _future;

  Future MakeCall() {
    print("Make Call");
    /*final mainReference = FirebaseDatabase.instance.reference().child('shows');
    mainReference.once().then((DataSnapshot dataSnapshot) {
      Map<dynamic, dynamic> values = dataSnapshot.value;
//      print(values.toString());
      values.forEach((key, value) {
        showNameList.add(value['name']);
      });
      print(showNameList);
    });*/
    showNameList.clear();
    showNameList.add({"name":"super"});
    showNameList.add({"name":"game"});
    print(showNameList.length);
  }

/*  MakeCall() {
    final mainReference = FirebaseDatabase.instance.reference().child('shows');
    mainReference.once().then((DataSnapshot dataSnapshot){
      Map<dynamic,dynamic> values = dataSnapshot.value;
      print(values.toString());
      values.forEach((key, value) {
//        print(key);
        print(value['name']);
      });
    });
  }*/

  void getData() {
    MakeCall();
  }

  @override
  void initState() {
    _future = MakeCall();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('This is App Bar for the FB Test'),
        actions: <Widget>[
          FlatButton.icon(
            icon: Icon(Icons.pages, color: Colors.white),
            label: Text('Query', style: TextStyle(color: Colors.white)),
            onPressed: () {
              getData();
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 10.0),
          FutureBuilder(
              future: _future,
              builder: (context, mainReference) {
/*                if (mainReference.hasData == null) {
                  return Container();
                }*/
                return ListView.builder(
                    shrinkWrap: true,
                    itemCount: showNameList.length,
                    itemBuilder: (context, index) {
                      return Card(
                        child: ListTile(
                          title: Text(showNameList[index]["name"]),
                        ),
                      );
                    });
              }),
        ],
      ),
    );
  }
}

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

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