android - flutter initstate() 列表未访问另一个类小部件

Question

我正在使用 Flutter 创建一个应用程序。我想从 firebase 获取数据并显示 GridView 。数据从 firebase 正确获取。 initState() 中的数据获取 但它并没有更新另一个扩展自 _MyHomePageState 的类 TheGridview。我正在使用一个变量 documents 用于存储来自 firebase 的列表。 initState() 文档值，但在方法 createchildwidget 中文档变为空。我尝试了很多方法请帮助我。代码如下所示。

    import 'dart:async';
    import 'package:flutter/material.dart';
    import 'package:augr/location/LocationScreen.dart';
    import 'package:cloud_firestore/cloud_firestore.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.

      MyApp({this.firestore});
      final Firestore firestore;


      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: MyHomePage(title: 'My Shop', firestore: firestore)
        );
      }
    }

    class MyHomePage extends StatefulWidget {

      MyHomePage({Key key, this.title, this.firestore}) : super(key: key);
      final Firestore firestore;
      final String title;

      @override
      _MyHomePageState createState() => new _MyHomePageState(firestore: firestore);
    }

    class _MyHomePageState extends State<MyHomePage> {
      _MyHomePageState({this.firestore});
      final Firestore firestore;
      var documents = [];

      void initState(){
        Firestore.instance.collection("messages").getDocuments().then((data) async{
          var list = data.documents;
          documents = list;
          print("init state document:"+documents.length.toString());  // value is getting
          super.initState();
          setState((){
            documents = list;
          });
        });



      }

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            iconTheme: IconThemeData(
              color: Colors.black, //change font color here
            ),
            backgroundColor: new Color(0xFFFAFAFA),
          )
          title:"title",
          body: TheGridview().build(),
        );
      }
    }

    class TheGridview extends _MyHomePageState{
      Card makeGridCell(String name, IconData icon){
        return Card(
          elevation: 1.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            verticalDirection: VerticalDirection.down,
            children: <Widget>[
              Center(child: Icon(icon)),
              Text(name)
            ],
          ),
        );
      }

      @override
      Widget build(BuildContext context) {
        return GridView.count(
          primary: true,
          padding: EdgeInsets.all(1.0),
          crossAxisCount: 2,
          childAspectRatio: 1.0,
          mainAxisSpacing: 1.0,
          crossAxisSpacing: 1.0,

          children: createchildwidget(),

          /*  children: <Widget>[
            makeGridCell("Home", Icons.access_alarm)
          ],*/


        );
      }

      List<Widget> createchildwidget(){
        print("createchildwidget:"+documents.length.toString()); // the value getting 0
        List<Widget> createchildwidget = List<Widget>();
        for(int i=0;i<documents.length;i++){
          createchildwidget.add(TheGridview().makeGridCell(makeGridCell(data[i].data['message'], Icons.access_alarm));

        }
        return createchildwidget;
      }


    }

Answer 1

与其将 TheGridView 制作成一个新类，不如将其制作成一个函数，并在加载 document 数据时调用它。试试这个:

    import 'dart:async';
    import 'package:flutter/material.dart';
    import 'package:augr/location/LocationScreen.dart';
    import 'package:cloud_firestore/cloud_firestore.dart';

    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.

      MyApp({this.firestore});
      final Firestore firestore;


      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            home: MyHomePage(title: 'My Shop', firestore: firestore)
        );
      }
    }

  class _MyHomePageState extends State<MyHomePage> {
      _MyHomePageState({this.firestore});
      final Firestore firestore;
      var documents = [];
bool isDocLoaded=false;
      void initState(){
        Firestore.instance.collection("messages").getDocuments().then((data) async{
          var list = data.documents;
          documents = list;
          print("init state document:"+documents.length.toString());  // value is getting
          super.initState();
          setState((){
            isDocLoaded=true;
            documents = list;
          });
        });



      }

      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            iconTheme: IconThemeData(
              color: Colors.black, //change font color here
            ),
            backgroundColor: new Color(0xFFFAFAFA),
          )
          title:"title",
          body: isDocLoaded? TheGridview():Center(child:CircularProgressIndicator()),
        );
      }

Widget TheGridView(){
return GridView.count(
          primary: true,
          padding: EdgeInsets.all(1.0),
          crossAxisCount: 2,
          childAspectRatio: 1.0,
          mainAxisSpacing: 1.0,
          crossAxisSpacing: 1.0,

          children: createchildwidget(),

          /*  children: <Widget>[
            makeGridCell("Home", Icons.access_alarm)
          ],*/
);
}

Card makeGridCell(String name, IconData icon){
        return Card(
          elevation: 1.0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            verticalDirection: VerticalDirection.down,
            children: <Widget>[
              Center(child: Icon(icon)),
              Text(name)
            ],
          ),
        );
      }
List<Widget> createchildwidget(){
        print("createchildwidget:"+documents.length.toString()); // the value getting 0
        List<Widget> createchildwidget = List<Widget>();
        for(int i=0;i<documents.length;i++){
          createchildwidget.add(makeGridCell(makeGridCell(data[i].data['message'], Icons.access_alarm));
        }
return createchildwidget;
      }
    }