如何为Flutter中的下拉菜单设置动态高度 [英] How to set dynamic height for dropdown popup in flutter
问题描述
我是扑扑发展的新手.我正在使用应用程序的下拉按钮.打开下拉菜单时,文本将在弹出对话框中被剪切.下面我附上了带有编码的屏幕截图.请指导我解决此问题.
I am new to flutter development. I am using the dropdown button of my application. When opening the drop-down menu, the text is getting cut in the popup dialog. Below I attached a screenshot with coding. Please guide me in fixing this issue.
DropdownButtonHideUnderline(
child: new DropdownButton(
isExpanded: true,
value: dropDownValue,
isDense: true,
//icon: Icon(Icons.keyboard_arrow_down, color: Colors.white,),
onChanged: (String newValue) {
setState(() {
dropDownValue = newValue;
state.didChange(newValue);
});
},
items: dropDownList.map((String value) {
return new DropdownMenuItem(
value: value,
child: new SizedBox(
width: MediaQuery.of(context).size.width / 1.4,
child: new Text(value,
softWrap: true,
style: TextStyle(color: Colors.white, fontSize: 18.0),),)
);
}).toList(),
),
),);
推荐答案
按照其他人的建议复制DropdownMenuItem
类是不够的,因为DropdownButton
要求items
的类型为List<DropdownMenuItem<T>>
.
Copying the DropdownMenuItem
class as someone else suggested will not be enough as DropdownButton
requires items
to be of type List<DropdownMenuItem<T>>
.
我创建了以下小部件,该小部件应该可以帮助您解决问题:
I have created the following widget which should help with your issue:
import 'package:flutter/material.dart';
/// Looks like a DropdownButton but has a few differences:
///
/// 1. Can be opened by a single tap even if the keyboard is showing (this might be a bug of the DropdownButton)
///
/// 2. The width of the overlay can be different than the width of the child
///
/// 3. The current selection is highlighted in the overlay
class CustomDropdown<T> extends PopupMenuButton<T> {
CustomDropdown({
Key key,
@required PopupMenuItemBuilder<T> itemBuilder,
@required T selectedValue,
PopupMenuItemSelected<T> onSelected,
PopupMenuCanceled onCanceled,
String tooltip,
double elevation = 8.0,
EdgeInsetsGeometry padding = const EdgeInsets.all(8.0),
Icon icon,
Offset offset = Offset.zero,
Widget child,
String placeholder = "Please select",
}) : super(
key: key,
itemBuilder: itemBuilder,
initialValue: selectedValue,
onSelected: onSelected,
onCanceled: onCanceled,
tooltip: tooltip,
elevation: elevation,
padding: padding,
icon: icon,
offset: offset,
child: child == null ? null : Stack(
children: <Widget>[
Builder(
builder: (BuildContext context) => Container(
height: 48,
alignment: AlignmentDirectional.centerStart,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
DefaultTextStyle(
style: selectedValue!= null ? Theme.of(context).textTheme.subhead
: Theme.of(context).textTheme.subhead.copyWith(color:
Theme.of(context).hintColor),
child: Expanded(child: selectedValue== null ? Text(placeholder) : child),
),
IconTheme(
data: IconThemeData(
color: Theme.of(context).brightness == Brightness.light
? Colors.grey.shade700 : Colors.white70,
),
child: const Icon(Icons.arrow_drop_down),
),
],
),
),
),
Positioned(
left: 0.0,
right: 0.0,
bottom: 8,
child: Container(
height: 1,
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: Color(0xFFBDBDBD), width: 0.0)),
),
),
),
],
),
);
}
正如您所看到的,它实际上扩展了PopupMenuButton
,但是我使它看起来与DropdownButton
相同.
It actually extends PopupMenuButton
as you can see, but I've made it look the same as the DropdownButton
.
itemBuilder
需要返回List<PopupMenuEntry<T>>
,每个条目通常是一个PopupMenuItem
,您可以向其提供任何child
小部件.
itemBuilder
needs to return List<PopupMenuEntry<T>>
, with each entry usually being a PopupMenuItem
to which you can provide any child
widget.
selectedValue
是当前选择的值,它将在覆盖图中突出显示.如果为null,则显示带有placeholder
字符串的Text
小部件.如果不为null,则会显示child
小部件.
selectedValue
is the currently selected value, which will be highlighted in the overlay. If it is null, a Text
widget with the placeholder
string is shown. If it is not null, the child
widget is shown.
通过修改此类以使用initialValue
为null的方式调用super()
,或者最好在构造函数中添加一个布尔值以从外部进行控制,您应该能够禁用突出显示.
You should be able to disable the highlight by modifying this class to either call super()
with an initialValue
of null, or even better add a boolean to the constructor to control this from the outside.
这篇关于如何为Flutter中的下拉菜单设置动态高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!