如何使自动完成框与TextField
框大小相同,TextField
没有特定的宽度,它占用了最大宽度。
Autocomplete(
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == '') {
return ['aa', 'bb', 'cc', 'aa', 'bb', 'cc'];
}
return ['aa', 'bb', 'cc', 'aa', 'bb', 'cc']
.where((String option) {
return option
.toString()
.contains(textEditingValue.text.toLowerCase());
});
},
onSelected: (option) {
print(option);
},
),
8条答案
按热度按时间y4ekin9u1#
我在尝试基于RawAutocomplete创建自己的autocomplete小部件时遇到了同样的问题,我使用布局构建器在我的optionsViewBuilder中获得了完美的容器宽度大小:
结果:Expected result on my component
lqfhib0f2#
我也经常遇到这个问题,选项构建器对于大小或填充在层次结构中的位置非常具体。下面是我的工作示例:
de90aj5v3#
正如这里所指出的,在写这篇文章的时候,最好的选择似乎是修改默认
_AutoCompleteOptions
代码(可以在这里找到)中包含的BoxConstraints
宽度和高度,并将其作为Autocomplete
的optionsViewBuilder
参数传递。粘贴我的代码,仅供参考:
h4cxqtbf4#
我有同样的问题,并通过使用
ValueListenableBuilder
解决了它。Material
小部件的宽度取决于field ViewBuilder
返回的小部件的宽度(默认为TextFormField
),因此一个解决方案是在完成一帧后获取TextFormField
的宽度并通知您的自定义optionsViewBuilder
示例代码:
jei2mxaa5#
我看过源代码
autocomplete.dart
,缺少参数宽度,但高度存在,我手动添加了宽度,它工作了。kse8i1jr6#
您是否尝试将整个Autocomplete小部件放入一个大小调整框中?如果大小调整小部件不工作,这可能是一个错误。
kgsdhlau7#
这是自动完成小工具的已知错误,在此处跟踪该错误:https://github.com/flutter/flutter/issues/78746
所以目前唯一的解决办法就是创建自己的自定义小部件。我写了自己的小部件,并作为包发布以供重用,也在维护中。
您可以在此处找到它:https://pub.dev/packages/searchfield
jfgube3f8#
3.3.5中仍发生扑动...
我的解决方法是将
Autocomplete
Package 在LayoutBuilder
中,并使用constraints.maxWidth
设置optionsViewBuilder
的ListView的宽度。详细片段如下:https://github.com/flutter/flutter/issues/78746#issuecomment-1326488333