Flutter - 从 firestore 获取数据并将其显示在下拉列表中

Question

我正在尝试从 firestore 获取数据并将其显示在下拉菜单中。我尝试像下面这样声明列表： \xc2\xa0 List Makes = [\'\'] 但我可以 \xe2\x80\x99t 查看数据，直到我单击另一个字段并且下拉列表多次填充。我将它放在一个方法中，因为最终，我想创建第二个下拉列表，其中数据库查询中有一个条件\xe2\x80\x99s。

\n\n

前任。如果选择丰田，则显示该特定品牌的所有型号。

\n\n

new StreamBuilder<QuerySnapshot>(\n      stream: Firestore.instance.collection("makesModels").snapshots(),\n      builder: (context, snapshot) {\n        if (!snapshot.hasData) return new Text("Please wait");\n        return new DropdownButton(\n          items: snapshot.data.documents.map((DocumentSnapshot document) {\n            return DropdownMenuItem(\n                value: document.data["make"],\n                child: new Text(document.data["make"]));\n          }).toList(),\n          value: category,\n          onChanged: (value) {\n            setState(() {\n              category = value;\n            });\n          },\n          hint: new Text("Makes"),\n          style: TextStyle(color: Colors.black),\n        );\n      }),\n      new StreamBuilder<QuerySnapshot>(\n      stream: Firestore.instance.collection("makesModels").where(\'make\', isEqualTo: category).snapshots(),\n      builder: (context, snapshot) {\n\n        if (!snapshot.hasData) return new Text("Please wait");\n        return new DropdownButton(\n          items: snapshot.data.documents.map((DocumentSnapshot document) { \n            for(int i = 0; i < document.data[\'models\'].length; i++){\n\n              print(document.data[\'models\'][i]);\n              return new DropdownMenuItem(\n              value: document.data[\'models\'][i],\n                child: new Text(document.data[\'models\'][i].toString()),\n              );\n            }   \n\n            }).toList(),\n          value: models,\n          onChanged: (value) {\n            print(value);\n\n            setState(() {\n              models = value;\n            });\n          },\n          hint: new Text("Models"),\n          style: TextStyle(color: Colors.black),\n        );\n      }),\n

\n

Answer 1

检查您提供的代码片段，该应用程序似乎显示了两个DropdownButton. 要在下拉列表中显示默认选定的项目，应将项目设置为value。在我的方法中，我设置了一个布尔值来检查是否需要设置默认值。

此示例应用中使用的 Firestore 数据访问两个 Firestore 集合：carMake和cars（包含“makeModel”）。

carMake收藏

cars包含“makeModel”的集合

完整的应用程序

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Initialize Firebase
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var carMake, carMakeModel;
  var setDefaultMake = true, setDefaultMakeModel = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    debugPrint('carMake: $carMake');
    debugPrint('carMakeModel: $carMakeModel');
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            flex: 1,
            child: Center(
              child: StreamBuilder<QuerySnapshot>(
                stream: FirebaseFirestore.instance
                    .collection('carMake')
                    .orderBy('name')
                    .snapshots(),
                builder: (BuildContext context,
                    AsyncSnapshot<QuerySnapshot> snapshot) {
                  // Safety check to ensure that snapshot contains data
                  // without this safety check, StreamBuilder dirty state warnings will be thrown
                  if (!snapshot.hasData) return Container();
                  // Set this value for default,
                  // setDefault will change if an item was selected
                  // First item from the List will be displayed
                  if (setDefaultMake) {
                    carMake = snapshot.data.docs[0].get('name');
                    debugPrint('setDefault make: $carMake');
                  }
                  return DropdownButton(
                    isExpanded: false,
                    value: carMake,
                    items: snapshot.data.docs.map((value) {
                      return DropdownMenuItem(
                        value: value.get('name'),
                        child: Text('${value.get('name')}'),
                      );
                    }).toList(),
                    onChanged: (value) {
                      debugPrint('selected onchange: $value');
                      setState(
                        () {
                          debugPrint('make selected: $value');
                          // Selected value will be stored
                          carMake = value;
                          // Default dropdown value won't be displayed anymore
                          setDefaultMake = false;
                          // Set makeModel to true to display first car from list
                          setDefaultMakeModel = true;
                        },
                      );
                    },
                  );
                },
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: Center(
              child: carMake != null
                  ? StreamBuilder<QuerySnapshot>(
                      stream: FirebaseFirestore.instance
                          .collection('cars')
                          .where('make', isEqualTo: carMake)
                          .orderBy("makeModel").snapshots(),
                      builder: (BuildContext context,
                          AsyncSnapshot<QuerySnapshot> snapshot) {
                        if (!snapshot.hasData) {
                          debugPrint('snapshot status: ${snapshot.error}');
                          return Container(
                            child:
                            Text(
                                'snapshot empty carMake: $carMake makeModel: $carMakeModel'),
                          );
                        }
                        if (setDefaultMakeModel) {
                          carMakeModel = snapshot.data.docs[0].get('makeModel');
                          debugPrint('setDefault makeModel: $carMakeModel');
                        }
                        return DropdownButton(
                          isExpanded: false,
                          value: carMakeModel,
                          items: snapshot.data.docs.map((value) {
                            debugPrint('makeModel: ${value.get('makeModel')}');
                            return DropdownMenuItem(
                              value: value.get('makeModel'),
                              child: Text(
                                '${value.get('makeModel')}',
                                overflow: TextOverflow.ellipsis,
                              ),
                            );
                          }).toList(),
                          onChanged: (value) {
                            debugPrint('makeModel selected: $value');
                            setState(
                              () {
                                // Selected value will be stored
                                carMakeModel = value;
                                // Default dropdown value won't be displayed anymore
                                setDefaultMakeModel = false;
                              },
                            );
                          },
                        );
                      },
                    )
                  : Container(
                      child: Text('carMake null carMake: $carMake makeModel: $carMakeModel'),
                    ),
            ),
          ),
        ],
      ),
    );
  }
}

演示