将高度和宽度设置为自动完成选项ViewBuilder 失败。我如何将自定义宽度和高度设置为自动完成选项视图。
代码:
child: Autocomplete<User>(
displayStringForOption: _displayStringForOption,
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == '') {
return const Iterable<User>.empty();
}
return _userOptions.where((User option) {
return option
.getName()
.contains(textEditingValue.text);
});
},
optionsViewBuilder: (context, onSelected, options) {
return Container(
height: 100,
width: 150,
color: Colors.white,
);
},
onSelected: (User selection) {
debugPrint('You just selected ${_displayStringForOption(selection)}');
},
),
这就是您如何添加自定义宽度和高度来颤动自动完成选项视图。
Autocomplete<User>(
displayStringForOption: _displayStringForOption,
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == '') {
return const Iterable<User>.empty();
}
return _userOptions.where((User option) {
return option.getName().contains(textEditingValue.text);
});
},
optionsViewBuilder: (context, onSelected, options) {
return Align( //<------ add this
alignment: Alignment.topLeft,
child: SizedBox( //<------ add this
width: 400, //<------ as per requierment
child: Material( //<------ add this
elevation: 4,
child: ListView.separated( //<------ any child padding: EdgeInsets.zero,
itemBuilder: (context, index) {
final option = options.elementAt(index);
return ListTile(
title: Text(option.toString()),
subtitle: const Text("This is subtitle"),
onTap: () {
//TODO
});
},
separatorBuilder: (context, index) => const Divider(),
itemCount: options.length))));
},
onSelected: (User selection) {
debugPrint('You just selected ${_displayStringForOption(selection)}');
},
),