Flutter 下拉菜单

一个 Flutter 下拉菜单库，可自定义 flutter dropdownbutton 小部件。

Flutter-Dropdown_Below

选项

选项 描述 必需
itemWidth 下拉菜单项的盒子宽度 X
itemTextstyle 下拉菜单项的文本样式 X
boxTextstyle 选定框的文本样式 X
boxPadding 选定框的内边距 X
boxHeight 选定框的高度 X
boxWidth 选定框的宽度 X
提示 选择项目之前的文本 X
value 选定的项目 X
items itemsList O
onChange 更改项目函数 O

如何使其工作？

示例说明。

1. 数据

_testList 的类型始终为列表。

如果要使用 map 或其他类型，可以自定义此包。

  List _testList = [{'no': 1, 'keyword': 'blue'},{'no': 2, 'keyword': 'black'},{'no': 3, 'keyword': 'red'}];
  List<DropdownMenuItem> _dropdownTestItems;
  var _selectedTest;

2. initState & build 项目到正确类型

如果要自定义项目子部件，例如 Text -> Container，可以更改任何想要的部件。

  @override
  void initState() {
    _dropdownTestItems = buildDropdownTestItems(_testList);
    super.initState();
  }

  List<DropdownMenuItem> buildDropdownTestItems(List _testList) {
    List<DropdownMenuItem> items = List();
    for (var i in _testList) {
      items.add(
        DropdownMenuItem(
          value: i,
          child: Text(i['keyword']),
        ),
      );
    }
    return items;
  }

3. 更改函数

  onChangeDropdownTests(selectedTest) {
    print(selectedTest);
    setState(() {
      _selectedTest = selectedTest;
    });
  }

4. UI

下拉菜单小部件。

    DropdownBelow(
      itemWidth: 200,
      itemTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Colors.black),
      boxTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Color(0XFFbbbbbb)),
      boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
      boxHeight: 45,
      boxWidth: 200,
      hint: Text('choose item'),
      value: _selectedTest,
      items: _dropdownTestItems,
      onChanged: onChangeDropdownTests,
    ),

5. 问题

如果想在进入页面时使 itemBox 下拉？

像这样将此代码放入 initState。

Timer(Duration(milliseconds: 200), () {
    CustomDropdownButtonState state = dropdownKey1.currentState;
    state.callTap();
});

并像这样为小部件添加 key。

DropdownBelow(
  key: dropdownKey1,
  itemWidth: 200,
  itemTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Colors.black),
  boxTextstyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w400, color: Color(0XFFbbbbbb)),
  boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
  boxHeight: 45,
  boxWidth: 200,
  hint: Text('choose item'),
  value: _selectedTest,
  items: _dropdownTestItems,
  onChanged: onChangeDropdownTests,
)

实际上，下拉菜单小部件是由导航制成的。所以，它可以工作。

GitHub

https://github.com/whatamelon/flutter_dropdown_below