flutter - 在 Flutter 应用程序中单击时如何为下拉按钮中的项目设置填充
问题描述
我正在尝试为单击时出现在下拉按钮中的项目列表设置边距/填充顶部。如何设置下拉按钮的填充。
单击下拉按钮后,我会像这样在视图顶部获得项目,
我需要获取下拉按钮下方的项目。我尝试在容器内提供填充,但似乎只有下拉按钮在移动,而不是其中的项目。有解决方案吗?
代码供参考,
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;
},
);
},
),
),
解决方案
试试下面的代码希望它对你有帮助。你必须从这里使用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;
});
},
),
),
推荐阅读
- angular - 同时添加/删除元素时列表项动画不起作用
- python - 如何通过 python 请求登录到 Iptorrents.com
- python - 在 Google Colab 中使用自定义库而不安装驱动器
- alexa - 如何让用户说出失败的话语?
- javascript - 将 React 路由组件传递给父组件 props 函数
- python - 运行 json.loads 后出现 KeyError
- python-3.x - “如何修复”AttributeError:“list”对象没有“translate”属性
- azure - 在 Azure 中启动/停止 vm 的最低权限角色
- c++ - 使用 mingw g++ 编译后运行 c++ .exe 文件时未找到入口点错误
- reactjs - Ant Design 改变风格选择组件