在Flatter中的ListView中显示多个文档数据
这是我使用的代码。我试图实现的是在RadioItem中的ListView中显示来自每个容器的不同驱动程序。目前,它只显示了一个重复的名称,如所附的照片所示在Flatter中的ListView中显示多个文档数据,listview,flutter,dart,stream-builder,Listview,Flutter,Dart,Stream Builder,这是我使用的代码。我试图实现的是在RadioItem中的ListView中显示来自每个容器的不同驱动程序。目前,它只显示了一个重复的名称,如所附的照片所示 导入“包装:颤振/材料.省道”; 导入“package:flatter_screenutil/flatter_screenutil.dart”; 导入“包:cloud_firestore/cloud_firestore.dart”; 类BeepListView扩展了StatefulWidget{ @凌驾 _BeepListViewState
导入“包装:颤振/材料.省道”;
导入“package:flatter_screenutil/flatter_screenutil.dart”;
导入“包:cloud_firestore/cloud_firestore.dart”;
类BeepListView扩展了StatefulWidget{
@凌驾
_BeepListViewState createState()=>\u BeepListViewState();
}
类_BeepListViewState扩展状态{
List beepUnits=新列表();
@凌驾
void initState(){
super.initState();
beepUnits.add(新的RadioModel(false,'Unit1'));
beepUnits.add(新的RadioModel(false,'Unit2'));
beepUnits.add(新的RadioModel(假,'Unit3'));
beepUnits.add(新的RadioModel(假,'Unit4'));
beepUnits.add(新的RadioModel(假,“单元5”);
beepUnits.add(新的RadioModel(假,'Unit6'));
beepUnits.add(新的RadioModel(false,'Unit7'));
beepUnits.add(新的RadioModel(假,'Unit8'));
beepUnits.add(新的RadioModel(false,'unit9'));
beepUnits.add(新的RadioModel(假,“单元10”);
beepUnits.add(新的RadioModel(假,'Unit11'));
beepUnits.add(新的RadioModel(假,'Unit12'));
beepUnits.add(新的RadioModel(假,'Unit13'));
beepUnits.add(新的RadioModel(假,'Unit14'));
beepUnits.add(新的RadioModel(假,'Unit15'));
beepUnits.add(新的RadioModel(假,'Unit16'));
beepUnits.add(新的RadioModel(假,'Unit17'));
beepUnits.add(新的RadioModel(假,'Unit18'));
beepUnits.add(新的RadioModel(假,'Unit19'));
beepUnits.add(新的RadioModel(假,'Unit 20'));
}
@凌驾
小部件构建(构建上下文){
双默认屏幕宽度=400.0;
双默认屏幕高度=810.0;
ScreenUtil.instance=ScreenUtil(
宽度:默认屏幕宽度,
高度:默认屏幕高度,
allowFontScaling:true,
)..初始(上下文);
返回容器(
边缘:边缘组。对称(垂直:20.0),
高度:100.0,
子项:ListView.builder(
滚动方向:轴水平,
itemCount:beepUnits.length,
itemBuilder:(构建上下文,int索引){
返回新墨水池(
颜色:颜色。蓝色,
onTap:(){
设置状态(){
beepUnits.forEach((element)=>element.isSelected=false);
beepUnits[index].isSelected=true;
});
},
儿童:新的放射性项目(beepUnits[索引]),
);
},
),
);
}
}
类RadioItem扩展了无状态小部件{
最终无线电模型项目;
放射性透射电镜(本项目);
@凌驾
小部件构建(构建上下文){
返回流生成器(
流:Firestore.instance
.collection('驱动程序')
.where('状态',isEqualTo:'值班')
.限额(1)
.snapshots(),
生成器:(BuildContext上下文,异步快照){
if(snapshot.hasError)返回新文本('Error:${snapshot.Error}');
交换机(快照.连接状态){
案例连接状态。正在等待:
返回新文本(“”);
违约:
返回容器(
边距:所有新边集(5.0),
孩子:新的一排(
mainAxisSize:mainAxisSize.max,
儿童:[
新容器(
高度:100.0,
宽度:160.0,
孩子:排(
儿童:[
容器(
孩子:填充(
填充:仅限常量边设置(
左:10.0,右:10.0),
儿童:新文本(
“埃塔”,
样式:TextStyle(
颜色:_item.isSelected
?颜色。灰色[200]
:颜色。黑色,
fontSize:ScreenUtil.instance.setSp(29.0),
fontWeight:fontWeight.bold,
),
),
),
),
填充物(
填充:仅限常量边集(顶部:15.0),
子:列(
crossAxisAlignment:crossAxisAlignment.start,
儿童:[
容器(
孩子:排(
儿童:[
容器(
子:图标(
Icons.directions\u总线,
颜色:_item.isSelected
?颜色。灰色[200]
:颜色。黑色,
大小:ScreenUtil.instance.setSp(19.0),
),
),
容器(
儿童:新文本(
_项目.按钮,
样式:新文本样式(
颜色:_item.isSelected
?颜色。灰色[200]
:颜色。黑色,
字体大小:
ScreenUtil.instance.setSp(15.0),
),
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class BeepListView extends StatefulWidget {
@override
_BeepListViewState createState() => _BeepListViewState();
}
class _BeepListViewState extends State<BeepListView> {
List<RadioModel> beepUnits = new List<RadioModel>();
@override
void initState() {
super.initState();
beepUnits.add(new RadioModel(false, 'Unit 1'));
beepUnits.add(new RadioModel(false, 'Unit 2'));
beepUnits.add(new RadioModel(false, 'Unit 3'));
beepUnits.add(new RadioModel(false, 'Unit 4'));
beepUnits.add(new RadioModel(false, 'Unit 5'));
beepUnits.add(new RadioModel(false, 'Unit 6'));
beepUnits.add(new RadioModel(false, 'Unit 7'));
beepUnits.add(new RadioModel(false, 'Unit 8'));
beepUnits.add(new RadioModel(false, 'Unit 9'));
beepUnits.add(new RadioModel(false, 'Unit 10'));
beepUnits.add(new RadioModel(false, 'Unit 11'));
beepUnits.add(new RadioModel(false, 'Unit 12'));
beepUnits.add(new RadioModel(false, 'Unit 13'));
beepUnits.add(new RadioModel(false, 'Unit 14'));
beepUnits.add(new RadioModel(false, 'Unit 15'));
beepUnits.add(new RadioModel(false, 'Unit 16'));
beepUnits.add(new RadioModel(false, 'Unit 17'));
beepUnits.add(new RadioModel(false, 'Unit 18'));
beepUnits.add(new RadioModel(false, 'Unit 19'));
beepUnits.add(new RadioModel(false, 'Unit 20'));
}
@override
Widget build(BuildContext context) {
double defaultScreenWidth = 400.0;
double defaultScreenHeight = 810.0;
ScreenUtil.instance = ScreenUtil(
width: defaultScreenWidth,
height: defaultScreenHeight,
allowFontScaling: true,
)..init(context);
return Container(
margin: EdgeInsets.symmetric(vertical: 20.0),
height: 100.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: beepUnits.length,
itemBuilder: (BuildContext context, int index) {
return new InkWell(
splashColor: Colors.blue,
onTap: () {
setState(() {
beepUnits.forEach((element) => element.isSelected = false);
beepUnits[index].isSelected = true;
});
},
child: new RadioItem(beepUnits[index]),
);
},
),
);
}
}
class RadioItem extends StatelessWidget {
final RadioModel _item;
RadioItem(this._item);
@override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance
.collection('driver')
.where('status', isEqualTo: 'On Duty')
.limit(1)
.snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return new Text(' ');
default:
return Container(
margin: new EdgeInsets.all(5.0),
child: new Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Container(
height: 100.0,
width: 160.0,
child: Row(
children: <Widget>[
Container(
child: Padding(
padding: const EdgeInsets.only(
left: 10.0, right: 10.0),
child: new Text(
'ETA',
style: TextStyle(
color: _item.isSelected
? Colors.grey[200]
: Colors.black,
fontSize: ScreenUtil.instance.setSp(29.0),
fontWeight: FontWeight.bold,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Row(
children: <Widget>[
Container(
child: Icon(
Icons.directions_bus,
color: _item.isSelected
? Colors.grey[200]
: Colors.black,
size: ScreenUtil.instance.setSp(19.0),
),
),
Container(
child: new Text(
_item.buttonTitle,
style: new TextStyle(
color: _item.isSelected
? Colors.grey[200]
: Colors.black,
fontSize:
ScreenUtil.instance.setSp(15.0),
),
),
),
],
),
),
Container(
child: Row(
children: <Widget>[
Container(
child: Icon(
Icons.swap_calls,
color: _item.isSelected
? Colors.grey[200]
: Colors.black,
size: ScreenUtil.instance.setSp(19.0),
),
),
Container(
child: new Text(
'Distance',
style: new TextStyle(
color: _item.isSelected
? Colors.grey[200]
: Colors.black,
fontSize:
ScreenUtil.instance.setSp(15.0),
),
),
),
],
),
),
Container(
child: Row(
children: <Widget>[
Container(
child: Icon(
Icons.face,
color: _item.isSelected
? Colors.grey[200]
: Colors.black,
size: ScreenUtil.instance.setSp(19.0),
),
),
Column(
children: snapshot.data.documents
.map((DocumentSnapshot document) {
return Container(
child: new Text(
'${document['fname']}',
style: new TextStyle(
color: _item.isSelected
? Colors.grey[200]
: Colors.black,
fontSize: ScreenUtil.instance
.setSp(15.0),
),
),
);
}).toList(),
),
],
),
),
],
),
),
],
),
decoration: new BoxDecoration(
color:
_item.isSelected ? Colors.blue : Colors.transparent,
border: new Border.all(
width: 0.5,
color: _item.isSelected ? Colors.blue : Colors.grey,
),
borderRadius:
const BorderRadius.all(const Radius.circular(10.0)),
),
),
],
),
);
}
});
}
}
class RadioModel {
bool isSelected;
final String buttonTitle;
RadioModel(this.isSelected, this.buttonTitle);
}