如何在 Flutter 应用程序中单击时为下拉按钮中的项目设置填充

Question

我正在尝试将单击时出现在下拉按钮中的项目列表设置为 margin/padding 顶部。如何为下拉按钮设置填充。

单击下拉按钮后，我将项目置于视图顶部，如下所示，

我需要获取下拉按钮下方的项目。我尝试在容器内填充，但似乎只有下拉按钮在移动，而不是其中的项目。有解决办法吗？

参考代码，

ButtonTheme(
                        alignedDropdown: true,
                        padding: EdgeInsets.only(left: 0.0, right: 0.0, top: 100, bottom: 0.0),
                        child:
                    DropdownButton(
                      menuMaxHeight: 300.0,
                    hint: _dropDownValue == null
                        ? Text("---SELECT---", style: TextStyle(color: Colors.black))
                        :
                    Text(
                    _dropDownValue,
                    style: TextStyle(color: Colors.blue, fontSize: 20),
                  ),
                  isExpanded: true,
                  iconSize: 30.0,
                      icon: Icon(Icons.arrow_drop_down_circle),
                      iconDisabledColor: Colors.red,
                      iconEnabledColor: Colors.green,
                      style: TextStyle(color: Colors.black),
                  dropdownColor: Colors.white,
                  items: answer.map(
                        (val) {
                          return DropdownMenuItem<String>(
                        value: val,
                        child: Text(val),
                      );
                    },
                  ).toList(),
                  onChanged: (val) {
                    setState(
                          () {
                        _dropDownValue = val;
                      },
                    );
                  },
                ),
                      ),

Answer 1

试试下面的代码希望对你有帮助。您必须使用 dropdown_below 来自 here

创建您的列表

    List numberList = [
    {'no': 1, 'number': '1'},
    {'no': 2, 'number': '2'},
    {'no': 3, 'number': '3'},
    {'no': 4, 'number': '4'},
    {'no': 5, 'number': '5'},
    {'no': 6, 'number': '6'},
    {'no': 7, 'number': '7'},
    {'no': 8, 'number': '8'},
    {'no': 9, 'number': '9'},
  ];

一个varibale并列出我们的价值

List<DropdownMenuItem<Object?>> _dropdownTestItems = [];
var selectedNumber;

创建 initState() 和 dispose() 方法：

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

  @override
  void dispose() {
    super.dispose();
  }

在下拉列表中添加您选择的数值

    List<DropdownMenuItem<Object?>> buildDropdownTestItems(List numberList) {
    List<DropdownMenuItem<Object?>> items = [];
    for (var i in numberList) {
      items.add(
        DropdownMenuItem(
          value: i,
          child: Text(
            i['number'],
            style: TextStyle(color: Colors.black),
          ),
        ),
      );
    }
    return items;
  }

您的小部件：

 Padding(
            padding: const EdgeInsets.all(8.0),
            child: DropdownBelow(
              itemWidth: 100,
              itemTextstyle: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                  color: Colors.black),
              boxTextstyle: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w400,
                  color: Colors.white54),
              boxPadding: EdgeInsets.fromLTRB(13, 12, 13, 12),
              boxWidth: 100,
              boxHeight: 45,
              boxDecoration: BoxDecoration(
                color: Colors.transparent,
                border: Border.all(
                  width: 1,
                  color: Colors.black,
                ),
              ),
              icon: Icon(
                Icons.arrow_downward,
                color: Colors.black,
              ),
              hint: Text(
                'Select',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              value: selectedNumber,
              items: _dropdownTestItems,
              onChanged: (selectedTest) {
                setState(() {
                  selectedNumber = selectedTest;
                });
              },
            ),
          ),

您的结果屏幕->

如何在 Flutter 应用程序中单击时为下拉按钮中的项目设置填充

How to set padding for items in dropdown button when clicked in Flutter application

padding

dart

dropdown

flutter

dropdownbutton