这是我正在使用的代码。我试图实现的是在RadioItem内的ListView中显示每个容器中的不同驱动程序。目前,它仅会重复显示一个名称,如附件中的照片所示。my output
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,Container(
child: new Text(
'Distance',Container(
child: Row(
children: <Widget>[
Container(
child: Icon(
Icons.face,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);
}
我曾尝试取消限制,但它所做的只是在一个容器中显示所有名称,并且仍然会重复执行,并在所有容器中显示相同的名称