我是 Flutter 开发的新手。我正在使用我的应用程序的下拉按钮。打开下拉菜单时,弹出对话框中的文本被剪切。下面我附上了带有编码的屏幕截图。请指导我解决此问题。
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
其他人建议的类(class)还不够DropdownButton
需要 items
为 List<DropdownMenuItem<T>>
类型.
我创建了以下小部件,应该可以帮助您解决问题:
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
相同.
itemBuilder
需要返回List<PopupMenuEntry<T>>
, 每个条目通常是 PopupMenuItem
您可以向其提供任何child
小部件。
selectedValue
是当前选定的值,将在叠加层中突出显示。如果为空,则为 Text
带有 placeholder
的小部件显示字符串。如果不为空,child
小部件已显示。
你应该能够通过修改这个类来禁用高亮,或者调用 super()
与 initialValue
null,或者更好的方法是在构造函数中添加一个 bool 值来从外部控制它。
https://stackoverflow.com/questions/57354477/
相关文章:
android-studio - Flutter Emulator 连接到服务协议(protocol
firebase - 持久化用户身份验证 Flutter Firebase
string - 如何在本地保存用户名并在每个页面 flutter 中显示
dart - 如何在 Flutter 中清除 AnimatedList 中的所有项目
flutter - Hummingbird(现在是 Flutter for web)计划发布。我应该
dart - ListView.builder 在 flutter 中逐项滚动
flutter - 使用 FadeInImage Flutter 正确拟合图像