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

Posted 2023-03-24

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

【英文标题】：How to set padding for items in dropdown button when clicked in Flutter application

【发布时间】：2021-12-12 16:14:03

【问题描述】：

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

点击下拉按钮后，我会像这样在视图顶部看到项目，

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

参考代码，

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希望对你有帮助。

这对我有帮助。非常感谢！

如果您的问题已经解决，请支持我的回答

确定已经完成

【参考方案1】：

试试下面的代码希望它对你有帮助。你必须使用来自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;

创建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;
                );
              ,
            ),
          ),

您的结果屏幕->

【讨论】：

谢谢你！我已将其应用于我的应用程序并且它工作正常

最欢迎@TerinTittu 很高兴为您提供帮助，尽情享受您的旅程