Flutter Autocomplete选项ViewBuilder高度、宽度问题

问题描述 投票:0回答:1

将高度和宽度设置为自动完成选项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)}');
                                },
                              ),
flutter flutter-layout
1个回答
0
投票

这就是您如何添加自定义宽度和高度来颤动自动完成选项视图。


          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)}');
            },
          ),
© www.soinside.com 2019 - 2024. All rights reserved.