flutter - Flutter 在 ListView 中添加项目

Question

如何将下拉列表中的项目添加到列表视图中？

这是可搜索下拉菜单的代码。我创建了一个添加按钮，但我无法理解如何从下拉列表中将所选项目直接添加到 ListView 中。目前我在 Listview 中只返回一些文本。（下拉列表中每个元素的名称 Galati）

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

  PlatformReach _selectedPlatformReach;

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

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

    super.initState();
  }

  List<DropdownMenuItem<PlatformReach>> buildDropdownMenuItemsPlatformReach(
      List platforms) {
    List<DropdownMenuItem<PlatformReach>> items = List();
    for (PlatformReach 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;
  }

Expanded(

                                  child: SearchableDropdown.single(
                                  isExpanded: true,
                                  value: _selectedPlatformReach,
                                  hint: " ",
                                  items: _dropdownPlatformReach,
                                  onChanged: (PlatformReach selectedPlatformReach) {
                                    setState(() {
                                      _selectedPlatformReach = selectedPlatformReach;
                                    });
                                  },
                                ),
                                flex: 2,
                              ),

class PlatformReach {
  String name;
  String hint;

  PlatformReach(this.name, this.hint);

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

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

标签： flutterdartmobilenative

Answer 1

DropdownButton 首先你应该使用它。那么你应该用 Listview 把它包起来。之后，您可以通过映射添加项目。下面是一个简单的例子。

ListView.builder(
                itemCount: 20,
                itemExtent: 50.0,
                itemBuilder: (BuildContext context, int index) {
                    for (int i = 0; i < 20; i++) {
                    selectedItemValue.add("NONE");
                    }
                    return DropdownButton(
                    value: selectedItemValue[index].toString(),
                    items: _dropDownItem(),
                    onChanged: (value) {
                        selectedItemValue[index] = value;
                        setState(() {});
                    },
                    hint: Text('Select drowdown'),
                    );
                }),
            )
        ],
        ));



 List<DropdownMenuItem<String>> _dropDownItem() {
    List<String> ddl = ['Jud Galati', '(RO, [Galati] County)'];
    return ddl
        .map((value) => DropdownMenuItem(
                value: value,
                child: Text(value),
            ))
        .toList();
    }