英文:
Remove default padding from DropdownButtonFormField2 and resize the width
问题
以下是翻译好的部分：
- 我想要下拉列表的宽度与上面的容器宽度相等。正如您在我提供的示例中所看到的，它们不相等，看起来很糟糕。
- 目前下拉选项中有太多的填充。我需要将所有内容压缩到最小填充，以便我可以指定我想要的填充。
这是我的Dropdown FormField的代码，以及屏幕截图。
谢谢！
英文:
I have this dropdown list and I want a few things changed, but have no clue how to do so.
- I want the width of the dropdown to equal the width of the container above. As you can see in the example I provided above, it is not equal and that looks really bad.
- There is way too much padding in the dropdown options right now. I need everything to be compressed to minimum padding so I can specify the padding I want
Here is my code for the Dropdown FormField, and here is a screenshot
Container(
width: size.width * .9,
child: DropdownButtonFormField2(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Muscle',
filled: true,
isDense: true,
fillColor: Colors.white24,
hintStyle: TextStyle(color: Colors.green),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
style: TextStyle(color: Colors.black),
value: selectedMuscleGroup,
onChanged: (String? newValue) {
setState(() {
selectedMuscleGroup = newValue;
});
},
items: <String>[
'Biceps',
'Triceps',
'Chest',
'Back',
'Legs',
'Shoulders'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Container(
padding: EdgeInsets.zero, child: Text(value)),
);
}).toList(),
),
),
Thank you so much in advance!!
答案1
得分: 1
DropdownButtonFormField2 提供了灵活的选项来自定义。
管理填充：
可以通过 dropdownStyleData 设置整体的 dropdownPadding，
可以通过 menuItemStyleData 设置特定菜单的填充。
控制宽度：
dropdownStyleData 中有 width 属性和 offset 用于设置下拉填充的整体宽度和位置。
为标签添加填充： 使用 label 属性
为当前选定的值（按钮）添加填充： 使用 buttonStyleData
例如，在你的情况下，代码如下：
Container(
color: Colors.white,
width: 250,
child: DropdownButtonFormField2(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
/// 用于管理标签填充
label: Padding(
padding: EdgeInsets.all(8.0),
child: Text('Muscle'),
),
hintStyle: TextStyle(color: Colors.green),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
/// 用于管理选定值填充
buttonStyleData: const ButtonStyleData(
height: 50,
padding: EdgeInsets.only(left: 8.0, top: 8.0)
),
style: const TextStyle(color: Colors.black),
dropdownStyleData: const DropdownStyleData(
width: 250.0,
padding: EdgeInsets.all(0.0)
),
menuItemStyleData: const MenuItemStyleData(
padding: EdgeInsets.all(0.0),
height: 36.0,
),
value: selectedMuscleGroup,
onChanged: (String? newValue) {
setState(() {
selectedMuscleGroup = newValue;
});
},
items: <String>['Biceps', 'Triceps', 'Chest', 'Back', 'Legs', 'Shoulders']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
);
输出：
英文:
DropdownButtonFormField2 provides flexible options to customize.
To Manage Padding:
Overall dropdownPadding can be set via dropdownStyleData and
Specific menu padding can be set via menuItemStyleData
To Control Width:
There is width property and offset to set overall width of dropdown padding and its position in dropdownStyleData.
For Adding Padding to label: Use label property
To Add padding to Current selected value (button): Use buttonStyleData
Example for your case,
Code:
Container(
color: Colors.white,
width: 250,
child: DropdownButtonFormField2(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
/// For Managing Label Padding
label: Padding(
padding: EdgeInsets.all(8.0),
child: Text('Muscle'),
),
hintStyle: TextStyle(color: Colors.green),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
/// For Managing Select Value Padding
buttonStyleData: const ButtonStyleData(
height: 50,
padding: EdgeInsets.only(left: 8.0, top: 8.0)
),
style: const TextStyle(color: Colors.black),
dropdownStyleData: const DropdownStyleData(
width: 250.0,
padding: EdgeInsets.all(0.0)
),
menuItemStyleData: const MenuItemStyleData(
padding: EdgeInsets.all(0.0),
height: 36.0,
),
value: selectedMuscleGroup,
onChanged: (String? newValue) {
setState(() {
selectedMuscleGroup = newValue;
});
},
items: <String>['Biceps', 'Triceps', 'Chest', 'Back', 'Legs', 'Shoulders']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
);
Output:
答案2
得分: 0
将你的 DropdownButtonFormField 包装在一个 ButtonTheme 小部件中，并将 ButtonTheme 小部件的 alignedDropdown: true 属性设置为 true。
英文:
Wrap your DropdownButtonFormField in a ButtonTheme widget, and set the alignedDropdown: true property of the ButtonTheme widget.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论