Question

现在由于在刷新后我的项目在列表视图中没有整齐地出现而感到困惑不已。例如，当一个具有新日期的项目被识别为存在一个新项目，但是第一个项目又被加载，但是这次是在底部时，发生了什么。但是，一旦页面重新加载一遍，它就会表现良好。观看视频：HERE

这可能是由于代码仅在重新启动页面之后才在StreamBuilder之后运行。线

else {
      final groupByDates =
      groupBy(snapshot.data, (obj) => obj.tijd.substring(0, 10));

因此，此代码也应通过刷新功能执行。怎么会我不知道，坚持下去...

希望有人能帮助我。

代码：

class _BrandweerMeldingenHomeState extends State<BrandweerMeldingenHome> {
  var datums = new List();
  var meldingenBijDatum = new List();
  var capcodesList = new List();
  var voertuigenList = new List();
  var mapDateMelding = new Map();
 
  StreamController _meldingenController;
 
  loadMeldingen() async {
    Meldingen.getMeldingen().then((res) async {
      _meldingenController.add(res);
      return res;
    });
  }
 
  Future<Null> _handleRefresh() async {
    Meldingen.getMeldingen().then((res) async {
      _meldingenController.add(res);
      return null;
    });
  }
 
  @override
  void initState() {
    super.initState();
    _meldingenController = new StreamController();
    loadMeldingen();
    initializeDateFormatting(); //very important
  }
 
  // Refresh key!
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
      GlobalKey<RefreshIndicatorState>();
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: _meldingenController.stream,
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(),
            );
          } else {
            final groupByDates =
                groupBy(snapshot.data, (obj) => obj.tijd.substring(0, 10));
            groupByDates.forEach((date, list) {
              datums.add(date);
              list.forEach((listItem) {
                listItem.capcodes.forEach((items) {
                  capcodesList.add({
                    "id": "${items.id}",
                    "gpkr": "${items.gpkr}",
                    "omschrijving": "${items.omschrijving}",
                  });
                });
                listItem.voertuigen.forEach((items) {
                  voertuigenList.add({
                    "nummer": "${items.nummer}",
                    "type": "${items.type}",
                    "standplaats": "${items.standplaats}",
                  });
                });
                meldingenBijDatum.add({
                  "id": "${listItem.id}",
                  "tijd": "${listItem.tijd}",
                  "melding": "${listItem.melding}",
                  "adres": {
                    "straat": "${listItem.adres.straat}",
                    "plaats": "${listItem.adres.plaats}",
                    "postcode": "${listItem.adres.postcode}",
                    "longitude": "${listItem.adres.longitude}",
                    "latitude": "${listItem.adres.latitude}"
                  },
                  "voertuigen": voertuigenList,
                  "prio": "${listItem.prio}",
                  "capcodes": capcodesList
                });
                capcodesList = [];
                voertuigenList = [];
              });
              mapDateMelding[date] = meldingenBijDatum;
              meldingenBijDatum = [];
            });
            return RefreshIndicator(
              key: _refreshIndicatorKey,
              onRefresh: _handleRefresh,
              child: ListView.builder(
                itemCount: groupByDates.length,
                itemBuilder: (BuildContext context, int index) {
                  return StickyHeader(
                    header: Container(
                        height: 50.0,
                        padding: EdgeInsets.only(left: 16, top: 16),
                        alignment: Alignment.centerLeft,
                        color: Theme.of(context).secondaryHeaderColor,
                        child: Column(
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                Container(
                                  child: Text(
                                      DateFormat.EEEE('nl')
                                          .format(DateTime.parse(datums[index]))
                                          .toUpperCase(),
                                      style: const TextStyle(
                                        color: ThemeColors.brandweer,
                                        fontWeight: FontWeight.bold,
                                      )),
                                ),
                                Expanded(child: SizedBox()),
                                Container(
                                  margin: EdgeInsets.only(right: 15),
                                  child: Text(
                                      DateFormat.yMMMMd('nl')
                                          .format(DateTime.parse(datums[index]))
                                          .toUpperCase(),
                                      style: const TextStyle(
                                        color: ThemeColors.brandweer,
                                        fontWeight: FontWeight.bold,
                                      )),
                                ),
                              ],
                            ),
                            SizedBox(
                              height: 10.0,
                              child: new Center(
                                child: new Container(
                                  margin: new EdgeInsetsDirectional.only(
                                      start: 1.0, end: 15.0),
                                  height: 2.5,
                                  color: Colors.red,
                                ),
                              ),
                            ),
                          ],
                        )),
                    content: Column(
                      children: <Widget>[
                        getItemsWidget(datums[index]),
                      ],
                    ),
                  );
                },
              ),
            );
          }
        },
      ),
    );
  }
 
  Widget getItemsWidget(index) {
    List<Widget> itemsList = new List();
    List namesString = mapDateMelding[index];
    for (var i = 0; i < namesString.length; i++) {
      itemsList.add(GestureDetector(
        onTap: () {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => MeldingPage(
                      id: namesString[i]['id'],
                      tijd: namesString[i]['tijd'],
                      prio: namesString[i]['prio'],
                      melding: namesString[i]['melding'],
                      adres: namesString[i]['adres'],
                      voertuigen: namesString[i]['voertuigen'],
                      capcodes: namesString[i]['capcodes'])));
        },
        child: SingleMeldingItem(
            tijd: namesString[i]['tijd'],
            prio: namesString[i]['prio'],
            melding: namesString[i]['melding'],
            straat: namesString[i]['adres']['straat'],
            plaats: namesString[i]['adres']['plaats']),
      ));
    }
    Column column = new Column(
      children: itemsList,
    );
    return column;
  }
}

Answer 1

我通过创建一个为我映射数据并为此清除变量的函数来解决了这个问题。不是最巧妙的方法，但暂时还可以。

 fillVariables(res) {
    mapDateMelding.clear();
    voertuigenList.clear();
    capcodesList.clear();
    meldingenBijDatum.clear();
    datums.clear();

    groupByDates.forEach((date, list) {
      ....
      ....
      mapDateMelding[date] = meldingenBijDatum;
      meldingenBijDatum = [];
    });
  }

StreamBuilder未按预期显示数据

1 个答案: