列表视图中的 Flutter 组合框项

Question

我正在尝试制作一个组合框，当我 select 一个项目时，我希望在按下按钮时将其添加到列表视图中。

我尝试了多种解决方案，但 none 似乎可行，据我所知，我可以创建一个输入字段并手动添加项目，但我无法使用组合框（没有让用户手动编写它们）。

这是我所做的：



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:searchable_dropdown/searchable_dropdown.dart';


class LocationTab extends StatefulWidget {
  @override
  _LocationTabState createState() => _LocationTabState();
}

class _LocationTabState extends State<LocationTab> {
  List<String> mylist = List();


  List<ParentCategoryComboBox> _visibility =
      ParentCategoryComboBox.getParentCategory();
  List<DropdownMenuItem<ParentCategoryComboBox>> _dropdownMenuItems;

  List<PlatformReachComboBox> _platformReach =
      PlatformReachComboBox.getPlatformReach();
  List<DropdownMenuItem<PlatformReachComboBox>> _dropdownPlatformReach;

  PlatformReachComboBox _selectedPlatformReach;

  ParentCategoryComboBox _selectedVisibility;

  @override
  void initState() {
    _dropdownMenuItems = buildDropDownMenuItems(_visibility);
    _selectedVisibility = _dropdownMenuItems[0].value;

    _dropdownPlatformReach =
        buildDropdownMenuItemsPlatformReach(_platformReach);
    _selectedPlatformReach = _dropdownPlatformReach[0].value;

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 10.0, left: 20.0, right: 20.0),
      child: SingleChildScrollView(
        physics: BouncingScrollPhysics(),
        scrollDirection: Axis.vertical,
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 20,
            ),
            Column(
              children: [
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "Select visibility:",
                    style: TextStyle(
                      color: Colors.indigoAccent,
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  ),
                ),
              ],
            ),
            DropdownButton(
              icon: Icon(
                Icons.visibility,
                color: Colors.black45,
              ),
              isExpanded: true,
              value: _selectedVisibility,
              items: _dropdownMenuItems,
              onChanged: (ParentCategoryComboBox selectedVisibility) {
                setState(() {
                  _selectedVisibility = selectedVisibility;
                });
              },
            ),
            SizedBox(
              height: 35,
            ),
            Container(
              padding: new EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(
                  border: Border.all(
                    width: 1,
                    color: Colors.grey,
                  ),
                  borderRadius: BorderRadius.circular((10))),
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: 10,
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Select platform reach:",
                      style: TextStyle(
                        color: Colors.indigoAccent,
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: SearchableDropdown(
                          isExpanded: true,
                          value: _selectedPlatformReach,
                          items: _dropdownPlatformReach,
                          isCaseSensitiveSearch: false,
                          onChanged:
                              (PlatformReachComboBox selectedPlatformReach) {
                            setState(() {
                              _selectedPlatformReach = selectedPlatformReach;
                            });
                          },
                        ),
                        flex: 2,
                      ),
                      Expanded(
                        child: Container(
                          height: 50.0,
                          width: 80,
                          child: Material(
                            borderRadius: BorderRadius.circular(20.0),
                            shadowColor: Colors.blue,
                            color: Colors.deepPurpleAccent,
                            elevation: 0.0,
                            child: GestureDetector(
                              onTap: () {
                                setState(() {
                                  mylist.add(_selectedPlatformReach.toString());
                                });
                              },
                              child: Center(
                                child: Text(
                                  'ADD',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                        flex: 0,
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      "Added:",
                      style: TextStyle(
                        color: Colors.indigoAccent,
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  ListView.builder(
                    padding: EdgeInsets.only(left: 10),
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: mylist.length,
                    itemBuilder: (BuildContext ctxt, int Index) {
                      return Text(
                          mylist[Index]
                      );

                    },
                  ),
//                  ListView.builder(
//                    padding: EdgeInsets.only(left: 10),
//                    scrollDirection: Axis.vertical,
//                    shrinkWrap: true,
//                    itemCount: _platformReach.length,
//                    itemBuilder: (BuildContext ctxt, int Index) {
//                      return Text(
//                        "Galati"
//                      );
////                      return DropdownButton(
////                        value: _selectedPlatformReach.toString(),
////                        items: _dropdownPlatformReach,
////                        onChanged: (value) {
////                          _selectedPlatformReach = value;
////                          setState(() {});
////                        },
////                        hint: Text('Select drowdown'),
////                      );
////                                return new Text(_dropdownPlatformReach[Index].value);
//                    },
//                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

模拟数据class:

import 'package:flutter/material.dart';

class PlatformReachComboBox {
  String name;
  String hint;

  PlatformReachComboBox(this.name, this.hint);

  static List<PlatformReachComboBox> getPlatformReach() {
    return <PlatformReachComboBox>[
      PlatformReachComboBox('Jud Galati', '(RO, [Galati] County)'),
      PlatformReachComboBox('Jud Braila', '(RO, [Braila] County)'),
      PlatformReachComboBox('Jud Prahova', '(RO, [Ploiesti] County)'),
      PlatformReachComboBox('Jud Maramures', '(RO, [Baia Mare] County)'),
    ];
  }
}

List<DropdownMenuItem<PlatformReachComboBox>>
    buildDropdownMenuItemsPlatformReach(List platforms) {
  List<DropdownMenuItem<PlatformReachComboBox>> items = List();
  for (PlatformReachComboBox platform in platforms) {
    items.add(
      DropdownMenuItem(
        value: platform,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              platform.name,
              style: TextStyle(fontWeight: FontWeight.bold),
              textAlign: TextAlign.start,
            ),
            Text(
              platform.hint,
              style:
                  TextStyle(fontWeight: FontWeight.normal, color: Colors.grey),
              textAlign: TextAlign.end,
            )
          ],
        ),
      ),
    );
  }
  return items;
}

这就是我遇到问题的地方，我不知道要在 ListView 中 return 按下按钮，然后在其中添加项目：

   ListView.builder(
                    padding: EdgeInsets.only(left: 10),
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: _platformReach.length,
                    itemBuilder: (BuildContext ctxt, int Index) {
                      return Text(
                        "Galati"
                      );

                    },
                  ),

Answer 1

请尝试这种方式...定义一个列表

List<String> mylist = List();

并在下面使用它

   ListView.builder(
                padding: EdgeInsets.only(left: 10),
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: mylist.length,
                itemBuilder: (BuildContext ctxt, int Index) {
                  return Text(
                    mylist[Index]
                  );

                },
              ),

点击按钮后

setState(() {
   mylist.add(_selectedVisibility.name);
});

列表视图中的 Flutter 组合框项

Flutter combo box item in list view

mobile

combobox

dart

flutter