Question

我的Web应用程序要求我从Firestore读取数据，并将这些字段显示为下拉按钮的值，并带有一个针对每个值的复选框。此下拉列表将在Formbuilder中使用。这是为了确保可以从下拉列表中选择多个值。它看起来像这样。我可以在这方面寻求帮助吗？

Widget _buildFormBuilderForm() {
return Column(
children: <Widget>[
FormBuilder(
key: _fbKey,
child: Expanded(
   child: Padding(
     padding: const EdgeInsets.all(16.0),
     child: Column(
        children: <Widget>[
           Row(
             children: <Widget>[
               Expanded(
                 child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: new StreamBuilder<QuerySnapshot>(
                        stream: 
                         Firestore.instance.collection("collection") 
                          .snapshots(),
                         builder: (context, snapshot) {
                         if (!snapshot.hasData)
                                return new Text("Please wait");
                                return new FormBuilderDropdown(
                                       initialValue: dropdownvalue,
                                       hint: new Text("Select 
                                                  dropdownvalue"),
                                       attribute: 'dropdownvalue',
                                       decoration: 
                              InputDecoration(labelText:"dropdown"),
                                       items: 
                       snapshot.data.documents.map((DocumentSnapshot 
                       document) {
                             for(int i = 0; i <document.data.length; i++){
                               print(document.data['Name']);
                               return new DropdownMenuItem(
                               value: document.data['Name'],
                               child: new 
                             Text(document.data['Name'].toString()),
                                );
                        }
                   }).toList(),

              onChanged: (value) {
                   print(value);
                   setState(() {
                     dropdownvalue = value;
                     });
                    },
                  );
                }),
               ),
              ),
             ],
            ),
           ]
         ),
      )))
     ],
   );
 }

Answer 1

由于您的示例涉及Firebase流，而这对于我来说是不可访问的，因此我提供了一个通用解决方案。 FormsBuilder软件包中有一个名为FormBuilderCheckboxList的小部件，可能对您有所帮助。您可能仍然可以根据需要锻炼布局部分。

解决方案1：

定义一个List<String>变量以容纳用户在窗口小部件中所做的选择。说

// hold the options user selects.
List<String> options = [];

使用FormBuilder程序包创建一个FormBuilderDropdown，并使用一个DropdownmenuItem和一个新的FormBuilderCheckboxList小部件作为其子级，并将options列表分配为{{1} }和initialValue中的value。

DropdownmenuItem

使用FormBuilderDropdown( attribute: "My Language", decoration: InputDecoration(labelText: "Laguage"), // set it as initial value initialValue: options, hint: Text('Select Language'), validators: [FormBuilderValidators.required()], items: [ DropdownMenuItem( // set it as the value of the drop down. value: options,属性捕获用户选择的选项，并将其添加到onChanged列表中。

options

解决方案2：

使用onChanged: (values) { options.clear(); values.forEach((e) => options.add(e as String)); setState(() {}); }而不是下拉菜单来独立处理用户选择。但是，当使用下拉列表中可用列表之外的菜单时，您将失去关闭菜单的功能。

包含两个解决方案的示例。

ExpansionTile

Flutter-从Firestore获取数据并在FormBuilderDropdown中使用它

1 个答案: