flutter实践：DropdownButton2使用示例

flutter实现下拉组件

dropdown_button2: '2.3.9'

Dart 复制代码

 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DropdownButtonHideUnderline(
      child: DropdownButton2<String>(
        isExpanded: true,
        selectedItemBuilder: (context) {
          return List<Widget>.generate(widget.module.items.length, (index) {
            return _buildSelectedItem(index);
          });
        },
        hint: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              widget.module.selectedValue,
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: widget.themeData.fontSizeBase,
                fontWeight: FontWeight.normal,
                color: widget.themeData.colorTextSecondary,
              ),
              overflow: TextOverflow.ellipsis,
            )
          ],
        ),
        items: widget.module.items
            .map((String item) => DropdownMenuItem<String>(
                  value: item,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      _buildDropItem(item),
                      Visibility(
                        visible: widget.module.items.length !=
                            widget.module.items.indexOf(item) + 1,
                        child: Divider(
                          height: 1,
                          thickness: 1,
                          color: widget.themeData.dividerColorBase,
                        ),
                      ),
                    ],
                  ),
                ))
            .toList(),
        value: widget.module.selectedValue,
        onChanged: (value) {
          setState(() {
            widget.module.selectedValue = value ?? '';
            widget.onValueChanged!(widget.module.selectedValue);
          });
        },
        buttonStyleData: ButtonStyleData(
          height: widget.themeData.heightSm,
          width: widget.themeData.heightSm,
          // padding: const EdgeInsets.only(left: 14, right: 14),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(widget.themeData.radiusSm),
            // border: Border.all(
            //   color: Colors.black26,
            // ),
            color: widget.themeData.dividerColorBase,
          ),
          elevation: 1,
        ),
        // iconStyleData: const IconStyleData(
        //   icon: Icon(
        //     Icons.arrow_forward_ios_outlined,
        //   ),
        //   iconSize: 14,
        //   iconEnabledColor: Colors.yellow,
        //   iconDisabledColor: Colors.grey,
        // ),
        iconStyleData: const IconStyleData(
          icon: SizedBox(),
          iconSize: 0,
          // iconEnabledColor: Colors.yellow,
          // iconDisabledColor: Colors.grey,
        ),
        dropdownStyleData: DropdownStyleData(
          maxHeight: widget.themeData.heightXxl * widget.module.items.length,
          width: widget.style == 0 ? widget.themeData.heightXxxl : 80,
          padding: EdgeInsets.zero,
          // scrollPadding: EdgeInsets.zero,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(widget.themeData.radiusLg),
            color: widget.themeData.fillBase,
          ),
          offset:
              widget.style == 0 ? const Offset(-20, -4) : const Offset(-52, -4),
          scrollbarTheme: ScrollbarThemeData(
            radius: const Radius.circular(40),
            thickness: MaterialStateProperty.all(0),
            thumbVisibility: MaterialStateProperty.all(false),
            trackVisibility: MaterialStateProperty.all(false),
          ),
        ),
        menuItemStyleData: MenuItemStyleData(
          height: widget.themeData.heightXxl,
          padding: EdgeInsets.only(
              left: widget.themeData.hSpacingSm,
              right: widget.themeData.hSpacingSm),
        ),
      ),
    );
  }

value:当前选中的值(必须与items中某一项value相等)

onChanged:用户选择某项时的回调

items:下拉选项列表

hint:未选择时显示的提示文本/控件

dropdownStyleData:配置下拉菜单面板样式

buttonStyleData:配置下拉按钮本身的样式

menuItemStyleData:配置每个下拉选项(item)样式

isExpanded:是否撑满父容器宽度

selectedItemBuilder:自定义下拉按钮中显示的"已选项"内容（即选中后在按钮上显示的 Widget），不影响下拉菜单中的选项显示

iconStyleData:专门用于定制下拉按钮右侧的图标（通常是 ▼ 箭头）