下拉菜单分隔符

Question

找了好几天的解决办法，没找到。我通过在容器内添加菜单条目并给出底部边框来实现一种方法。但是，当选择该项目时，就会出现问题，它会与所选框中的边框一起出现。我使用 DropDownButton2，现在我没有看到 dropDownSeperator，因为以前有一个。我该如何解决这个问题？我确实尝试使用变量控制边框，并在选择边框时将边框设置为透明，但是菜单条目中的该项目也失去了边框

DropdownButton2<int>(
                            onMenuStateChange: (bool value) {
                              BlocProvider.of<MenuAvailabilityBloc>(context)
                                  .add(DropDownTappedEvent(
                                      isDropDownClosed: value));
                            },
                            items: [
                              DropdownMenuItem(
                                  value: 0,
                                  child: Container(
                                      width: 150,
                                      padding:
                                          const EdgeInsets.only(left: 15),
                                      decoration: BoxDecoration(
                                          border: Border(
                                              bottom: BorderSide(
                                                  color: selectedValue ==
                                                              0 &&
                                                          !isDropDownClosed
                                                      ? Colors.transparent
                                                      : appBloc
                                                          .state
                                                          .appTheme
                                                          .fieldBorder))),
                                      child: const Text('1'))),
                            ],
                            value: selectedValue,
                            isExpanded: true,
                            iconStyleData: IconStyleData(
                                icon:
                                    SvgPicture.asset(eSvgAssets.downArrow)),
                            onChanged: (int? newValue) {
                              BlocProvider.of<MenuAvailabilityBloc>(context)
                                  .add(NewValueSelectEvent(
                                      selectedValue: newValue!));
                            },
                            menuItemStyleData: const MenuItemStyleData(
                                padding: EdgeInsets.symmetric(
                                    horizontal: 0, vertical: 0)),
                            dropdownStyleData: const DropdownStyleData(
                                padding: EdgeInsets.symmetric(vertical: 0),
                                width: 150,
                                decoration:
                                    BoxDecoration(color: Colors.white)),
                          ),

Answer 1

要在

DropdownButton2

中创建分隔符，您需要添加一个用作分隔符的元素：

const DropdownMenuItem<String>(
         enabled: false,
         child: Divider(),
),

您可以在此处或下面查看完整示例：

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = [
    'Item1',
    'Item2',
    'Item3',
    'Item4',
  ];
  String? selectedValue;

  List<DropdownMenuItem<String>> _addDividersAfterItems(List<String> items) {
    final List<DropdownMenuItem<String>> menuItems = [];
    for (final String item in items) {
      menuItems.addAll(
        [
          DropdownMenuItem<String>(
            value: item,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Text(
                item,
                style: const TextStyle(
                  fontSize: 14,
                ),
              ),
            ),
          ),
          //If it's last item, we will not add Divider after it.
          if (item != items.last)
            const DropdownMenuItem<String>(
              enabled: false,
              child: Divider(),
            ),
        ],
      );
    }
    return menuItems;
  }

  List<double> _getCustomItemsHeights() {
    final List<double> itemsHeights = [];
    for (int i = 0; i < (items.length * 2) - 1; i++) {
      if (i.isEven) {
        itemsHeights.add(40);
      }
      //Dividers indexes will be the odd indexes
      if (i.isOdd) {
        itemsHeights.add(4);
      }
    }
    return itemsHeights;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButtonHideUnderline(
          child: DropdownButton2<String>(
            isExpanded: true,
            hint: Text(
              'Select Item',
              style: TextStyle(
                fontSize: 14,
                color: Theme.of(context).hintColor,
              ),
            ),
            items: _addDividersAfterItems(items),
            value: selectedValue,
            onChanged: (String? value) {
              setState(() {
                selectedValue = value;
              });
            },
            buttonStyleData: const ButtonStyleData(
              padding: EdgeInsets.symmetric(horizontal: 16),
              height: 40,
              width: 140,
            ),
            dropdownStyleData: const DropdownStyleData(
              maxHeight: 200,
            ),
            menuItemStyleData: MenuItemStyleData(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              customHeights: _getCustomItemsHeights(),
            ),
            iconStyleData: const IconStyleData(
              openMenuIcon: Icon(Icons.arrow_drop_up),
            ),
          ),
        ),
      ),
    );
  }
}