在 Flutter 中,我可以使用 DropdownMenuItems 构建一个 Dropdown,如下所示:
我添加的 DropdownMenuItems 总是比下拉菜单本身更宽:
如何调整 DropdownMenuItem 的宽度,或删除多余的水平填充?
我的 DropdownMenuItem 小部件如下所示:
DropdownMenuItem(
value: unit.name,
child: Text('hey'),
);
而我的下拉小部件看起来像这样:
return Container(
width: 300.0,
child: DropdownButtonHideUnderline(
child: DropdownButton(
value: name,
items: listOfDropdownMenuItems,
onChanged: onChanged,
style: Theme.of(context).textTheme.title,
),
),
);
已添加此功能。请参阅https://github.com/flutter/flutter/pull/14849
您现在可以将其包装在 ButtonTheme 中并将
alignedDropdown
设置为 true。
return Container(
width: 300.0,
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
value: name,
items: listOfDropdownMenuItems,
onChanged: onChanged,
style: Theme.of(context).textTheme.title,
),
),
),
);
我通过将
isExpanded
更改为 true 解决了这个问题;
return Container(
width: 300.0,
child: DropdownButtonHideUnderline(
child: DropdownButton(
isExpanded: true,
value: name,
items: listOfDropdownMenuItems,
onChanged: onChanged,
style: Theme.of(context).textTheme.title,
),
),
);
isExpanded: true
会将宽度拉伸至全屏。但如果您想要自定义下拉菜单。这是我的自定义dropdown.dart
import 'package:flutter/material.dart';
class CustomDropDown extends StatelessWidget {
final value;
final List<String> itemsList;
final Color dropdownColor;
final Function(dynamic value) onChanged;
const CustomDropDown({
@required this.value,
@required this.itemsList,
this.dropdownColor,
@required this.onChanged,
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(left: 20, top: 3, bottom: 3, right: 20),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: DropdownButtonHideUnderline(
child: Padding(
padding: const EdgeInsets.only(left: 14.0, right: 14),
child: DropdownButton(
isExpanded: true,
dropdownColor: dropdownColor,
value: value,
items: itemsList
.map((String item) => DropdownMenuItem<String>(
value: item,
child: Text(item),
))
.toList(),
onChanged: (value) => onChanged(value),
),
),
),
),
);
}
}
现在你可以这样称呼它了。
CustomDropDown(
value: selectedValue,
itemsList: ['Music', 'Photographer'],
onChanged: (value) {
setState(() {
selectedValue = value;
});
},
),
就我而言,这是有效的。
Container(
decoration: BoxDecoration(
border: Border.all(
color: ContactColors.hint2, width: 2)),
width: double.infinity,
margin: const EdgeInsets.all(5),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: new Text("Select City"),
isExpanded: true,
alignment: Alignment.center,
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(color: ContactColors.white),
onChanged: (String? value) {
// This is called when the user selects an item.
setState(() {
dropdownValue = value!;
});
},
items: list
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Container(
margin: const EdgeInsets.all(10),
child: Text(value,
style: const TextStyle(
color: ContactColors.primaryColor)),
),
);
}).toList(),
)),
),
我通过添加 isExpanded: true 解决了这个问题,然后将下拉列表包装到容器中,然后再次包装到填充小部件,这对我有用
代码:-
Container(
height: 60,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(color: borderContainerColor, width: 3)),
child: Padding(
padding: const EdgeInsets.all(8.0), //here include this to get padding
child: DropdownButton(
isExpanded: true,
underline: Container(),
alignment: Alignment.bottomCenter,
elevation: 0,
borderRadius: BorderRadius.circular(5 ),
value: dropdownvalue,
icon: const Icon(Icons.keyboard_arrow_down),
items: items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
),
),
),
尝试使用此参数
isDense
它将缩小小部件并删除额外的填充
就像这样
DropdownButton(
isDense: true,
value : lname_listValue,
items: casteEDList.map((String items)
{
return DropdownMenuItem(
value: items,
child: Text(items),);
}).toList(),
onChanged: (String? newValue) {
setState(() {
lname_listValue = newValue!;
},);
},
),
您可以使用侧面的 width 属性更改 DropdownMenu 宽度 下拉式菜单。以下示例可能可以解决您的问题。
在构建方法中找出屏幕宽度 双宽度 = MediaQuery.sizeOf(context).width;
双宽度 = MediaQuery.sizeOf(context).width;
double halfScreenWidth = width / 2;
DropdownMenu<String>(
initialSelection: genderList.first,
width: halfScreenWidth, // Add this line you also add direct width 200
label: Text("Gender"),
onSelected: (value) {
setState(() {
genderValue = value.toString();
});
},
dropdownMenuEntries: genderList.map<DropdownMenuEntry<String>>((String value) {
return DropdownMenuEntry<String>(
value: value, label: value);
}).toList(),
),