flutter 下拉菜單中的多項選擇

Question

嗨，在我的應用程序中，我有這樣的東西。

我有一個顯示 3 個選項的下拉列表，但是有什么辦法可以在 flutter 的下拉列表中 select 多個選項？ 並將所選選項的結果存儲在列表中？

或者是否可以在 flutter 中執行以下操作？

謝謝。

Answer 1

您可以通過使用自定義小部件作為 DropdownMenuItem 的子級來實現這一點，其中自定義小部件需要是有狀態的，以便它可以處理自己的 state 以顯示復選標記或其他內容。 它應該有它自己的 onTap 方法，所以 DropdownMenuItem onTap 不會觸發和 select 選項，關閉下拉菜單。 您還需要有一個選項來完成選擇。

但是我建議您為這種情況尋找另一種方法以獲得更好的可用性，例如一個對話框，您可以在其中 select 多個選項：flutter 中是否有與 Z4C4AD5FCA2E7A3F74DBB1CED00381AAA 中的“選擇多個”元素等效的小部件

Answer 2

代碼：-

        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 3

您可以使用以下 package

https://pub.dev/packages/multiselect

它有一個基於下拉的實現而不是對話框來顯示選項。

PS：我在最近的一個項目中需要這個功能，並且必須創建自己的小部件。 這是我的實現。