Flutter DropDownButton弹出按钮下方200px [英] Flutter DropDownButton Popup 200px below Button
问题描述
我在ListView中使用具有自定义样式的DropDownButton.我的问题是:PopupMenu在Button下面大约200-300px处打开，因此看起来下面的Button已经打开:
I'm using a DropDownButton with a custom style inside a ListView. My problem is: the PopupMenu opens about 200-300px below the Button so it looks like the Button below that has opened:
我将Dropdown打包为自定义样式，但是我已经尝试删除它了，但是什么也没做.我也尝试只使用普通的Dropdownbutton，但是效果相同.相应的版本:
I wrapped the Dropdown in a custom style, but i already tried removing that and that did nothing. I've also tried to use just a normal Dropdownbutton, but that had the same effect. the corresponding build:
@override
Widget build(BuildContext context) {
homeModel = Provider.of<HomeModel>(context);
model = Provider.of<TransferModel>(context);
navigator = Navigator.of(context);
var items = model.items.entries.toList();
return Container(
color: Colors.white,
child: ListView.builder(
physics: BouncingScrollPhysics(),
itemCount: model.items.entries.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.only(left: 30, right: 30, top: 10),
child: CustomDropDown(
errorText: "",
hint: items[index].value["label"],
items: items[index]
.value["items"]
.asMap()
.map((int i, str) => MapEntry(
i,
DropdownMenuItem(
value: i,
child: Text(str is Map
? str["displayName"].toString()
: str.toString()),
)))
.values
.toList()
.cast<DropdownMenuItem<int>>(),
value: items[index].value["selected"],
onChanged: (position) =>
model.selectItem(items[index].key, position),
),
);
},
),
);
}
CustomDropDown:
CustomDropDown:
class CustomDropDown extends StatelessWidget {
final int value;
final String hint;
final String errorText;
final List<DropdownMenuItem> items;
final Function onChanged;
const CustomDropDown(
{Key key,
this.value,
this.hint,
this.items,
this.onChanged,
this.errorText})
: super(key: key);
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.grey[100], borderRadius: BorderRadius.circular(30)),
child: Padding(
padding:
const EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 5),
child: DropdownButton<int>(
value: value,
hint: Text(
hint,
style: TextStyle(fontSize: 20),
overflow: TextOverflow.ellipsis,
),
style: Theme.of(context).textTheme.title,
items: items,
onChanged: (item) {
onChanged(item);
},
isExpanded: true,
underline: Container(),
icon: Icon(Icons.keyboard_arrow_down),
),
),
),
if (errorText != null)
Padding(
padding: EdgeInsets.only(left: 30, top: 10),
child: Text(errorText, style: TextStyle(fontSize: 12, color: Colors.red[800]),),
)
],
);
}
}
edit:我刚刚注意到，弹出窗口始终在屏幕中心打开.但是我仍然不知道为什么会这样.
edit: I've just noticed, that the popup always opens in the screen center. But I still have no idea why that is.
edit 2:由于@JoãoSoares，我现在缩小了范围:我将Widget与ListView一起使用AnimatedContainer包围，以打开和关闭菜单.这个容器的填充似乎是罪魁祸首，但是我不知道如何解决这个问题，因为我需要那个Container :(孩子是ListView窗口小部件)
edit 2: thanks to @João Soares I've now narrowed down the issue: I surround the Widget with the ListView with an AnimatedContainer for opening and closing the menu. The padding of this container seems to be the culprit, but i have no idea how i can fix this, since i need that Container: (the Child is the ListView Widget)
class ContentSheet extends StatelessWidget {
final Widget child;
final bool isMenuVisible;
const ContentSheet({Key key, this.child, this.isMenuVisible}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 50),
child: AnimatedContainer(
duration: Duration(milliseconds: 450),
curve: Curves.elasticOut,
padding: EdgeInsets.only(top: isMenuVisible ? 400 : 100),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20), topRight: Radius.circular(20)),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20), topRight: Radius.circular(20)),
color: Colors.white,
),
child: child
),
),
),
);
}
}
推荐答案
我已经尝试使用下面的代码来制作CustomDropDown小部件，并且该小部件可以按预期工作，而下拉菜单在视图中显示的较低.您代码中的其他内容可能会影响其位置.
I've tried your CustomDropDown widget with the code below and it works as expected, without the dropdown showing lower in the view. Something else in your code may be affecting its position.
class DropdownIssue extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _DropdownIssueState();
}
}
class _DropdownIssueState extends State<DropdownIssue> {
int currentValue = 0;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.grey,
child: Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomDropDown(
hint: 'hint',
errorText: '',
value: currentValue,
items: [
DropdownMenuItem(
value: 0,
child: Text('test 0'),
),
DropdownMenuItem(
value: 1,
child: Text('test 1'),
),
DropdownMenuItem(
value: 2,
child: Text('test 2'),
),
].cast<DropdownMenuItem<int>>(),
onChanged: (value) {
setState(() {
currentValue = value;
});
print('changed to $value');
}
),
],
),
)
),
);
}
}
这篇关于Flutter DropDownButton弹出按钮下方200px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
