颤振中下拉菜单内的多项选择

Question

嗨，在我的应用程序中，我有这样的事情。

我有一个显示 3 个选项的下拉列表，但是有什么方法可以在颤振的下拉列表中选择多个选项？并将所选选项的结果存储在列表中？

或者是否可以在颤振中执行以下操作？

谢谢。

Answer 1

代码：-

        class CustomMultiselectDropDown extends StatefulWidget {
      final Function(List<String>) selectedList;
      final List<String> listOFStrings;
    
      CustomMultiselectDropDown(
          {required this.selectedList, required this.listOFStrings});
    
      @override
      createState() {
        return new _CustomMultiselectDropDownState();
      }
    }
    
    class _CustomMultiselectDropDownState extends State<CustomMultiselectDropDown> {
      List<String> listOFSelectedItem = [];
      String selectedText = "";
    
      @override
      Widget build(BuildContext context) {
        var size = MediaQuery.of(context).size;
        return Container(
          margin: EdgeInsets.only(top: 10.0),
          decoration:
              BoxDecoration(border: Border.all(color: PrimeDentalColors.grey1)),
          child: ExpansionTile(
            iconColor: PrimeDentalColors.grey,
            title: Text(
              listOFSelectedItem.isEmpty ? "Select" : listOFSelectedItem[0],
              style: GoogleFonts.poppins(
                textStyle: TextStyle(
                  color: PrimeDentalColors.grey,
                  fontWeight: FontWeight.w400,
                  fontSize: 15.0,
                ),
              ),
            ),
            children: <Widget>[
              new ListView.builder(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: widget.listOFStrings.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    margin: EdgeInsets.only(bottom: 8.0),
                    child: _ViewItem(
                        item: widget.listOFStrings[index],
                        selected: (val) {
                          selectedText = val;
                          if (listOFSelectedItem.contains(val)) {
                            listOFSelectedItem.remove(val);
                          } else {
                            listOFSelectedItem.add(val);
                          }
                          widget.selectedList(listOFSelectedItem);
                          setState(() {});
                        },
                        itemSelected: listOFSelectedItem
                            .contains(widget.listOFStrings[index])),
                  );
                },
              ),
            ],
          ),
        );
      }
    }
    
    class _ViewItem extends StatelessWidget {
      String item;
      bool itemSelected;
      final Function(String) selected;
    
      _ViewItem(
          {required this.item, required this.itemSelected, required this.selected});
    
      @override
      Widget build(BuildContext context) {
        var size = MediaQuery.of(context).size;
        return Padding(
          padding:
              EdgeInsets.only(left: size.width * .032, right: size.width * .098),
          child: Row(
            children: [
              SizedBox(
                height: 24.0,
                width: 24.0,
                child: Checkbox(
                  value: itemSelected,
                  onChanged: (val) {
                    selected(item);
                  },
                  activeColor: PrimeDentalColors.blue,
                ),
              ),
              SizedBox(
                width: size.width * .025,
              ),
              Text(
                item,
                style: GoogleFonts.poppins(
                  textStyle: TextStyle(
                    color: PrimeDentalColors.grey,
                    fontWeight: FontWeight.w400,
                    fontSize: 17.0,
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }

Answer 2

您可以通过使用自定义小部件作为 DropdownMenuItem 的子项来实现此目的，其中自定义小部件需要有状态，以便它可以处理自己的状态以显示复选标记或其他内容。并且它应该有自己的 onTap 方法，因此 DropdownMenuItem onTap 不会触发并选择该选项，从而消除下拉菜单。您还需要有一个选项来完成选择。

但我建议您针对这种情况寻找另一种方法，以获得更好的可用性，例如可以选择多个选项的对话框：Is there an equal widget in flutter to the "select multiple" element in HTML