Class Flatter无法在同一类中调用FireStore文档变量
我一直在尝试学习颤振和编程。我这里有一个问题,我一直无法在论坛上找到解决方案 或者其他任何地方。我想在此视图上显示FireStore文档的详细信息。上一个视图是仅显示标题的颤振列表视图。 上一个视图(main)将文档ID作为“partID”传递到此视图中。我已经能够成功地查询该文档以获取快照,甚至打印 我们需要详细说明。但是,当我尝试将变量添加为表单字段中的“现有文本”时,它无法识别它们。 我错过了什么Class Flatter无法在同一类中调用FireStore文档变量,class,variables,dart,google-cloud-firestore,flutter,Class,Variables,Dart,Google Cloud Firestore,Flutter,我一直在尝试学习颤振和编程。我这里有一个问题,我一直无法在论坛上找到解决方案 或者其他任何地方。我想在此视图上显示FireStore文档的详细信息。上一个视图是仅显示标题的颤振列表视图。 上一个视图(main)将文档ID作为“partID”传递到此视图中。我已经能够成功地查询该文档以获取快照,甚至打印 我们需要详细说明。但是,当我尝试将变量添加为表单字段中的“现有文本”时,它无法识别它们。 我错过了什么 import 'dart:async'; import 'package:cloud_fir
import 'dart:async';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'ItemData.dart';
class View extends StatefulWidget {
final String partID;
View({Key key, this.partID}): super (key: key);
@override
ViewState createState() => ViewState();
}
class ViewState extends State<View> {
Data newData = new Data();
@override
Widget build(BuildContext context) {
getItem();
return new Scaffold(
//CreateWidget()
appBar: AppBar(
backgroundColor: Colors.black,
title: Text("Item Data"),
),
body:
new Column(
children: <Widget>[
Flexible(
flex: 0,
child: Center(
child: Form(
//key: this._formKey,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
ListTile(
title: TextFormField(
initialValue: newData.title,
decoration: new InputDecoration(
icon: new Icon(Icons.edit),
),
)
),
ListTile(
title: TextFormField(
initialValue: title,
decoration: new InputDecoration(
icon: new Icon(Icons.edit),
),
)
),
new Text("${widget.partID}"),
],
),
),
),
),
],
)
);
}
Future getItem() async {
DocumentSnapshot snapshot = await Firestore.instance.collection('items').document('${widget.partID}').get();
String title = snapshot['title'];
String location = snapshot.data['location'].toString();
print('${title}');
print('${location}');
}
}
导入'dart:async';
导入“包:cloud_firestore/cloud_firestore.dart”;
进口“包装:颤振/材料.省道”;
导入“包:intl/intl.dart”;
导入“ItemData.dart”;
类视图扩展了StatefulWidget{
最后的字符串部分;
视图({Key-Key,this.partID}):超级(Key:Key);
@凌驾
ViewState createState()=>ViewState();
}
类ViewState扩展了状态{
Data newData=新数据();
@凌驾
小部件构建(构建上下文){
getItem();
归还新脚手架(
//CreateWidget()
appBar:appBar(
背景颜色:Colors.black,
标题:文本(“项目数据”),
),
正文:
新专栏(
儿童:[
灵活的(
弹性:0,
儿童:中心(
孩子:表格(
//钥匙:这个,
孩子:Flex(
方向:轴垂直,
儿童:[
列表砖(
标题:TextFormField(
初始值:newData.title,
装饰:新的输入装饰(
图标:新图标(Icons.edit),
),
)
),
列表砖(
标题:TextFormField(
初始值:title,
装饰:新的输入装饰(
图标:新图标(Icons.edit),
),
)
),
新文本(“${widget.partID}”),
],
),
),
),
),
],
)
);
}
Future getItem()异步{
DocumentSnapshot snapshot=await Firestore.instance.collection('items').document('${widget.partID}').get();
字符串标题=快照['title'];
字符串位置=snapshot.data['location'].toString();
打印(“${title}”);
打印(“${location}”);
}
}
为此,你应该使用类似未来的健身器的东西作为你的身体。它仍然允许异步加载,您还可以显示加载指示器。它还允许您从子窗口小部件中的数据库访问所有值
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text(title)),
body: new FutureBuilder(
future: Firestore.instance.collection('items').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return const Text('Loading...');
return new Column(
children: <Widget>[
Flexible(
flex: 0,
child: Center(
child: Form(
//key: this._formKey,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
ListTile(
title: TextFormField(
initialValue: snapshot.data["title"],
decoration: new InputDecoration(
icon: new Icon(Icons.edit),
),
)),
ListTile(
title: TextFormField(
initialValue: title,
decoration: new InputDecoration(
icon: new Icon(Icons.edit),
),
)),
new Text("${widget.partID}"),
],
),
),
),
),
],
);
}),
);
}
@覆盖
小部件构建(构建上下文){
归还新脚手架(
appBar:新appBar(标题:新文本(标题)),
身体:新未来建设者(
future:Firestore.instance.collection('items').snapshots(),
生成器:(上下文,快照){
如果(!snapshot.hasData)返回常量文本('Loading…');
返回新列(
儿童:[
灵活的(
弹性:0,
儿童:中心(
孩子:表格(
//钥匙:这个,
孩子:Flex(
方向:轴垂直,
儿童:[
列表砖(
标题:TextFormField(
initialValue:snapshot.data[“title”],
装饰:新的输入装饰(
图标:新图标(Icons.edit),
),
)),
列表砖(
标题:TextFormField(
初始值:title,
装饰:新的输入装饰(
图标:新图标(Icons.edit),
),
)),
新文本(“${widget.partID}”),
],
),
),
),
),
],
);
}),
);
}
这是使用FutureBuilder时代码布局的示例