1

我在颤振方面很新。我不知道后台发生了什么，因为热重载后它的工作正常。在发生的另一个 dart 文件中，firebase 在热重载后不向我提供初始化数据。

class CityServices {
      getCites() {
        return Firestore.instance.collection('cities').getDocuments();
      }
    }

class _HomeScreenState extends State<HomeScreen> {
  bool citiesFlag = false;
  var cities;
  int citiesCount;
  String actualCity;

也许错误就在这里。

  @override
  void initState() {
    super.initState();
    CityServices().getCites().then((QuerySnapshot) {
      if (QuerySnapshot.documents.isNotEmpty) {
        citiesFlag = true;
        cities = QuerySnapshot.documents;
        citiesCount = QuerySnapshot.documents.length;
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: MyColors.vintageGreen,
        appBar: AppBar(
          backgroundColor: MyColors.background,
          title: Center(
            child: Text(
              'Válasszon települést...',
              style: GoogleFonts.barlowCondensed(
                  color: MyColors.appbarText,
                  fontSize: 26.0,
                  fontWeight: FontWeight.w500),
            ),
          ),
        ),
        body: Center(
          child: Container(
            child: GridView.count(
              crossAxisCount: 2,
              children: List.generate(citiesCount, (index) {
                return Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                  ),
                  child: InkWell(
                    onTap: () {
                      actualCity = cities[index]['city_name'];
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                CityView(cityName: actualCity)),
                      );
                    },
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        ListTile(
                          title: Center(
                              child: Text(
                            cities[index]['city_name'],
                            style: TextStyle(
                                fontWeight: FontWeight.w500, fontSize: 18.0),
                          )),
                          subtitle: Center(child: Text('22 bejegyzés')),
                        ),
                        Flexible(
                          child: ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(5)),
                            child: Padding(
                              padding: EdgeInsets.only(bottom: 15.0),
                              child: Image(
                                image: AssetImage(
                                  cities[index]['img_path'],
                                ),
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                  color: MyColors.background,
                );
              }),
            ),
          ),
        ),
      ),
    );
  }
}

也许这是错误？它应该在飞镖文件的顶部吗？

class HomeScreen extends StatefulWidget {
  static const String id = 'home';
  @override
  _HomeScreenState createState() => new _HomeScreenState();
}
4

1 回答 1

0

让我解释一下这个问题以及它发生的原因，然后提出一些解决方案。

在里面initState你正在调用CityServices().getCites().then...which 是一种async方法。
但是，当您的小部件第一次构建时，您期望从 Firestore 获得的数据还没有准备好，因此您会null同时获得cities和citiesCount.

短期解决方案：
确保有空检查，等待数据时显示指示器。

body: Center(
   child: (cities == null) ? 
     CircularProgressIndicator()
     : Container(...

此外，您还可以将您的重构initState为这样的

void getCities() async {
   var snapshot CityServices().getCites();
   setState(() {
        citiesFlag = true;
        cities = snapshot.documents;
        citiesCount = snapshot.documents.length;
      });
}

@override
  void initState() {
    getCities();  
    super.initState();
  }

长期解决方案：
使用BLoC模式并使数据加载与 UI 分离。有关如何实现它，
请参阅flutter_bloc 。

于 2020-08-21T19:28:26.213 回答