如何在颤动应用程序中单击时为下拉按钮中的项目设置填充 [英] How to set padding for items in dropdown button when clicked in Flutter application

问题描述

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

单击下拉按钮后，我将获得视图顶部的项目，如下所示

我需要获取下拉按钮下面的项目。 我试着给容器里的填充物，但似乎只有下拉按钮在移动，而不是里面的物品。 有解决此问题的方法吗？

参考代码，

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;
                      },
                    );
                  },
                ),
                      ),

推荐答案

尝试以下代码，希望对您有帮助。您必须使用here中的DropDown_Below

创建您的列表

    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'},
  ];

一个变量并列出我们的值

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

Create 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;
                });
              },
            ),
          ),

您的结果屏幕->；

这篇关于如何在颤动应用程序中单击时为下拉按钮中的项目设置填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！