在Flutter中,可以通过自定义DropdownButton的下拉菜单项来更改DropdownMenuItem的宽度和填充。下面是一种实现方式:
class CustomDropdownButtonFormField<T> extends StatefulWidget {
final List<DropdownMenuItem<T>> items;
final T value;
final ValueChanged<T> onChanged;
CustomDropdownButtonFormField({
@required this.items,
@required this.value,
@required this.onChanged,
});
@override
_CustomDropdownButtonFormFieldState<T> createState() =>
_CustomDropdownButtonFormFieldState<T>();
}
class _CustomDropdownButtonFormFieldState<T>
extends State<CustomDropdownButtonFormField<T>> {
@override
Widget build(BuildContext context) {
return DropdownButtonFormField<T>(
value: widget.value,
items: widget.items,
onChanged: widget.onChanged,
decoration: InputDecoration(
contentPadding: EdgeInsets.zero, // 取消默认的内边距
),
selectedItemBuilder: (BuildContext context) {
return widget.items.map<Widget>((DropdownMenuItem<T> item) {
return Container(
width: 200, // 设置宽度
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), // 设置填充
child: Text(item.value.toString()),
);
}).toList();
},
);
}
}
在上述代码中,我们通过设置selectedItemBuilder来自定义下拉菜单项的宽度和填充。在这个例子中,我们将宽度设置为200,并设置了水平和垂直方向的填充。
List<DropdownMenuItem<String>> dropdownItems = [
DropdownMenuItem(
value: 'Option 1',
child: Text('Option 1'),
),
DropdownMenuItem(
value: 'Option 2',
child: Text('Option 2'),
),
DropdownMenuItem(
value: 'Option 3',
child: Text('Option 3'),
),
];
String dropdownValue = 'Option 1';
CustomDropdownButtonFormField<String>(
items: dropdownItems,
value: dropdownValue,
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
);
在上述代码中,我们创建了一个包含三个下拉菜单项的列表,并将初始值设置为'Option 1'。然后,我们使用CustomDropdownButtonFormField组件来构建下拉菜单,并在onChanged回调中更新选中的值。
这样,你就可以通过自定义DropdownButtonFormField组件来更改Flutter DropdownMenuItem的宽度和填充了。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云