Flutter2.0-自动完成小部件从右侧退出屏幕
如何使自动完成框与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);
},
),
回答
我在尝试基于 RawAutocomplete 制作我自己的自动完成小部件时遇到了同样的问题，我使用布局构建器在我的 optionsViewBuilder 中获得完美的容器宽度大小：
LayoutBuilder(
builder: (context, constraints) => RawAutocomplete<String>(
focusNode: focusNode,
fieldViewBuilder: fieldViewBuilder,
optionsViewBuilder: (context, onSelected, options) => Align(
alignment: Alignment.topLeft,
child: Material(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(bottom: Radius.circular(4.0)),
),
child: Container(
height: 52.0 * options.length,
width: constraints.biggest.width, // <-- Right here !
child: ListView.builder(
padding: EdgeInsets.zero,
itemCount: options.length,
shrinkWrap: false,
itemBuilder: (BuildContext context, int index) {
final String option = options.elementAt(index);
return InkWell(
onTap: () => onSelected(option),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(option),
),
);
},
),
),
),
),
optionsBuilder: (textEditingValue) =>
suggestions.where((element) => element.contains(textEditingValue.text.trim().toUpperCase())),
textEditingController: controller,
),
)
结果：
我的组件的预期结果