android - Flutter Gridview 不更新来自 firebase 的值
问题描述
我是新来的。我正在用 firebase 构建一个应用程序。在我的应用程序中,我想在 gridview 中显示产品详细信息。细节取自firebase。我成功地获得了价值。但是我从 firebase 获得的值没有更新到 GridView 列表。我的代码如下所示。
AppMain.Dart
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;
@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{
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)
],
),
);
}
GridView build(){
return GridView.count(
primary: true,
padding: EdgeInsets.all(1.0),
crossAxisCount: 2,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0,
children: createChildrenTexts(),
/* children: <Widget>[
makeGridCell("Home", Icons.access_alarm)
],*/
);
}
List<Widget> createChildrenTexts(){
List<Widget> childrenTexts = List<Widget>();
getProduceID().then((data){
for(int i=0;i<data.length;i++){
childrenTexts.add(makeGridCell(data[i].data['message'], Icons.access_alarm));
print("data from firebase:"+data[i].data['message']);
}
});
return childrenTexts;
}
Future<List<DocumentSnapshot>> getProduceID() async{
QuerySnapshot querySnapshot = await Firestore.instance.collection("messages").getDocuments();
var list = querySnapshot.documents;
return list;
}
}
这createChildrenTexts
是我想在 GridView 中添加项目的方法。from firebase 正在控制台中打印。但没有添加到列表中。我知道我想写有状态的小部件。但是我怎么写请帮帮我。
解决方案
我createChildrenTexts
在_MyHomePageState
课堂上添加时得到了答案。所以我可以从 Firestore 访问数据。我documents
在_MyHomePageState
. isDocLoaded
然后还添加了一个用于检查值是否存储的标志。我的最终代码如下所示。
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 = [];
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: createChildrenTexts(),
/* 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> createChildrenTexts(){
print("createChildrenTexts:"+documents.length.toString()); // the value getting 0
List<Widget> childrenTexts = List<Widget>();
for(int i=0;i<documents.length;i++){
childrenTexts.add(makeGridCell(makeGridCell(data[i].data['message'], Icons.access_alarm));
}
return createchildwidget;
}
}
推荐阅读
- python - 字段值在列表中的 Django 查询集
- arrays - MongoDB具有唯一值的多个数组
- python - 在给定一条线的情况下找到周围的矩形区域
- ruby-on-rails - 将 has_many 更改为 has_and_belongs_to_many
- python - 蟒蛇和熊猫。检查列“name”和“last_name”中的值是否在“email”列中
- adal - 当您使用 AuthenticationContext.AcquireTokenAsync(...) 强制登录时,TokenCache 中实际更改或更新了什么?
- haskell - GHC 是否支持无 GC 编程?
- java - 在 Java 中使用递归泛型时的类型不兼容
- android - 使用毕加索加载时图像未保存到存储中
- azure - Azure 事件中心的 Web/桌面客户端