在Flutter中的ListView中显示多个文档数据

这是我正在使用的代码。我试图实现的是在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);
}

我曾尝试取消限制,但它所做的只是在一个容器中显示所有名称,并且仍然会重复执行,并在所有容器中显示相同的名称

joenzhou 回答:在Flutter中的ListView中显示多个文档数据

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3146007.html

大家都在问