dart - setState() 仅使用 List.generate 更新

问题描述

我正在尝试创建一个应用程序，我可以在其中从 Cloud Firestore 获取数据并使用数据创建多个自定义小部件。

自定义小部件是eventCardWidget

import 'package:flutter/material.dart';
import 'package:do_and_stuff/settings/theme.dart';

class EventCardWidget extends StatelessWidget {
  EventCardWidget(this.eventImage, this.eventTitle, this.eventDescription,
      this.eventAddress, this.eventDate, this.eventTime, this.peopleRequired);

  String eventTitle;
  String eventAddress;
  String eventDate;
  String eventImage;
  String eventTime;
  String eventDescription;
  int peopleRequired;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: GestureDetector(
        child: InkWell(
          splashColor: ThemeSettings.CardInkwell,
          onTap: () {},
          child: Card(
            elevation: 1.0,
            margin: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 14.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  margin: const EdgeInsets.only(right: 19.0),
                  width: 100.0,
                  height: 100.0,
                  child: Image.asset(this.eventImage, scale: .5),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                              margin: const EdgeInsets.only(
                                  top: 12.0, bottom: 10.0),
                              child: Text(
                                eventTitle,
                                style: TextStyle(
                                  fontSize: 18.0,
                                  color: Colors.black,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(right: 10.0),
                            child: Text(
                              this.eventAddress,
                              style: TextStyle(
                                  fontSize: 16.0,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.grey[600]),
                            ),
                          ),
                        ],
                      ),
                      Container(
                        margin: const EdgeInsets.only(right: 10.0),
                        child: Text(
                          this.eventDescription,
                          style: TextStyle(
                            fontSize: 16.0,
                          ),
                          maxLines: 3,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.fromLTRB(0.0, 25.0, 0.0, 0.0),
                        margin: const EdgeInsets.only(top: 10.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Text(
                              this.eventDate,
                              style: TextStyle(
                                color: Colors.grey[500],
                                fontSize: 11.0,
                              ),
                            ),
                            Container(
                                margin: const EdgeInsets.only(right: 10.0),
                                child: Text(peopleRequired.toString())),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

现在，在我之上我Widget build(BuildContext context) { 有 List<Widget> cards = [];

然后在Widget build(BuildContext context) {我有children: cards,

所以此时，这个页面会打开，卡片被初始化为空。但是，我现在有

  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      final List results = await db.getEvent(
        DateFormat("y-MM-dd").format(DateTime.now()),
        DateFormat("y-MM-dd").format(DateTime.now().add(Duration(days: 20))),
        2,
      );
      for (DocumentSnapshot result in results) {
        cards.add(EventCardWidget(
          "assets/flutter-icon.png",
          result.data.values
              .toList()[result.data.keys.toList().indexOf("name")],
          result.data.values
              .toList()[result.data.keys.toList().indexOf("description")],
          "1 mi",
          "2018-10-29",
//            result.data.values
//                .toList()[result.data.keys.toList().indexOf("eventDate")],
          "Time",
          result.data.values
              .toList()[result.data.keys.toList().indexOf("num")],
        ));
        setState(() {
          return cards;
        });
      }
    });
  }

现在，在 Android Studio 中，当我设置断点时，我可以看到它cards有更多元素，但屏幕上没有任何更新。

现在奇怪的是，当我做类似的事情时

  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      final List results = await db.getEvent(
        DateFormat("y-MM-dd").format(DateTime.now()),
        DateFormat("y-MM-dd").format(DateTime.now().add(Duration(days: 20))),
        2,
      );
      for (DocumentSnapshot result in results) {
        setState(() {
          return cards = List.generate(
            3,
            (i) => new EventCardWidget(
                "assets/flutter-icon.png",
                "Title",
                "Description",
                "12 mi",
                "2018-10-29",
                "Time",
                5),
            growable: true,
          );
        });
      }
    });
  }

然后屏幕上的文字更新。

有任何想法吗？

这不是重复的，因为我已经尝试过这里的解决方案，但它仍然不起作用

  for (DocumentSnapshot result in results) {
    setState(() {
      cards = List.from(cards)
        ..add(EventCardWidget(
          "assets/flutter-icon.png",
          result.data.values
              .toList()[result.data.keys.toList().indexOf("name")],
          result.data.values
              .toList()[result.data.keys.toList().indexOf("description")],
          "1 mi",
          "2018-10-29",
          result.data.values.toList()[
              result.data.keys.toList().indexOf("peopleRequired")],
        ));
    });
  }

标签： dartflutter

dart - setState() 仅使用 List.generate 更新

问题描述

解决方案

推荐阅读