Flutter-从服务器获取数据后,如何重置自动完成列表?

发布于 2025-01-28 04:10:38 字数 7179 浏览 2 评论 0原文

我有自动完成列表:

List<CompanyName> companyNames = <CompanyName>[
    const CompanyName(name: 'No Data'),
  ];

这起作用了,只有一个项目没有数据在数组上,但是该数组是由服务器中的数据填充的,问题是当您在start上按AutoComplete时,您会看到无数据在列表上,服务器获取数据后,列表将不会由服务器的数据更新。

我的想法是创建一个本地变量,该变量将通过async调用来更新,并且该变量应在服务器响应之前隐藏自动完成列表,或在获取后刷新(重新渲染)窗口小部件...

Autocomplete<CompanyName>(
 optionsBuilder:
  (TextEditingValue textEditingValue) {
      return companyNames.where((CompanyName companyName) {
          return companyName.name.toLowerCase().contains(textEditingValue.text.toLowerCase());
}).toList();
},
optionsViewBuilder: (BuildContext context,  AutocompleteOnSelected<CompanyName>
    onSelected,
    Iterable<CompanyName> options) {
       return Align(
          alignment: Alignment.topLeft,
          child: Material(
            child: ConstrainedBox(constraints: const BoxConstraints(maxHeight: 280,),
             child: SizedBox(width: 280,                                                  
                     height: companyNames.length <= 1 ? 80 : 280,
             child: ListView.builder(padding: const EdgeInsets.all(10.0),
                itemCount: options.length, itemBuilder: (BuildContext context, int index) {                                                                                        final CompanyName option = options.elementAt(index);
return GestureDetector(
onTap: () {                                                                                         onSelected(option);                                                                                        },
                                                                                          child: ListTile(                                                                                          title: Text(option.name, style: TextStyle(color: isDarkMode ? Colors.white : Colors.black)),
                                                                                          ),
                                                                                        );
                                                                                      })))));
                                                                },
                                                                fieldViewBuilder:
                                                                    (context,
                                                                        controller,
                                                                        focusNode,
                                                                        onEditingComplete) {
                                                                  return TextFormField(
                                                                      controller:
                                                                          controller,
                                                                      focusNode:
                                                                          focusNode,
                                                                      onEditingComplete:
                                                                          onEditingComplete,
                                                                      keyboardType:
                                                                          TextInputType
                                                                              .text,
                                                                      autocorrect:
                                                                          false,
                                                                      decoration: InputDecoration(
                                                                          isDense: true,
                                                                          hintText: "Company Name",
                                                                          border: OutlineInputBorder(
                                                                            borderRadius:
                                                                                BorderRadius.circular(10.0),
                                                                          ),
                                                                          fillColor: isDarkMode ? const Color(0XFF212124) : Colors.white,
                                                                          filled: true),
                                                                      validator: (value) {
                                                                        if (value ==
                                                                                null ||
                                                                            value.isEmpty) {
                                                                          return 'Please enter company name';
                                                                        } else {
                                                                          setState(
                                                                              () {
                                                                            client =
                                                                                value;
                                                                          });
                                                                        }
                                                                        return null;
                                                                      });
                                                                },
                                                                onSelected:
                                                                    (CompanyName
                                                                        selection) {
                                                                  setState(() {
                                                                    brokerCompany =
                                                                        selection
                                                                            .name;
                                                                  });
                                                                },
                                                                displayStringForOption:
                                                                    (CompanyName
                                                                            option) =>
                                                                        option
                                                                            .name,
                                                              ),

最佳选择是什么?放置变量和重新渲染autocomplete()的最佳选择是在哪里?

I have Autocomplete list:

List<CompanyName> companyNames = <CompanyName>[
    const CompanyName(name: 'No Data'),
  ];

And this works, only one item No Data is on the array, but that array is filled by data from the server, and the problem is when you press autocomplete on start you will see the No Data item on the list, after server fetching data, the list will not be updated by data from the server.

My idea is to create a local variable that will be updated by the async call, and that variable should hide autocomplete list before the server responds, or refresh the (re-render) widget after fetching...

Autocomplete<CompanyName>(
 optionsBuilder:
  (TextEditingValue textEditingValue) {
      return companyNames.where((CompanyName companyName) {
          return companyName.name.toLowerCase().contains(textEditingValue.text.toLowerCase());
}).toList();
},
optionsViewBuilder: (BuildContext context,  AutocompleteOnSelected<CompanyName>
    onSelected,
    Iterable<CompanyName> options) {
       return Align(
          alignment: Alignment.topLeft,
          child: Material(
            child: ConstrainedBox(constraints: const BoxConstraints(maxHeight: 280,),
             child: SizedBox(width: 280,                                                  
                     height: companyNames.length <= 1 ? 80 : 280,
             child: ListView.builder(padding: const EdgeInsets.all(10.0),
                itemCount: options.length, itemBuilder: (BuildContext context, int index) {                                                                                        final CompanyName option = options.elementAt(index);
return GestureDetector(
onTap: () {                                                                                         onSelected(option);                                                                                        },
                                                                                          child: ListTile(                                                                                          title: Text(option.name, style: TextStyle(color: isDarkMode ? Colors.white : Colors.black)),
                                                                                          ),
                                                                                        );
                                                                                      })))));
                                                                },
                                                                fieldViewBuilder:
                                                                    (context,
                                                                        controller,
                                                                        focusNode,
                                                                        onEditingComplete) {
                                                                  return TextFormField(
                                                                      controller:
                                                                          controller,
                                                                      focusNode:
                                                                          focusNode,
                                                                      onEditingComplete:
                                                                          onEditingComplete,
                                                                      keyboardType:
                                                                          TextInputType
                                                                              .text,
                                                                      autocorrect:
                                                                          false,
                                                                      decoration: InputDecoration(
                                                                          isDense: true,
                                                                          hintText: "Company Name",
                                                                          border: OutlineInputBorder(
                                                                            borderRadius:
                                                                                BorderRadius.circular(10.0),
                                                                          ),
                                                                          fillColor: isDarkMode ? const Color(0XFF212124) : Colors.white,
                                                                          filled: true),
                                                                      validator: (value) {
                                                                        if (value ==
                                                                                null ||
                                                                            value.isEmpty) {
                                                                          return 'Please enter company name';
                                                                        } else {
                                                                          setState(
                                                                              () {
                                                                            client =
                                                                                value;
                                                                          });
                                                                        }
                                                                        return null;
                                                                      });
                                                                },
                                                                onSelected:
                                                                    (CompanyName
                                                                        selection) {
                                                                  setState(() {
                                                                    brokerCompany =
                                                                        selection
                                                                            .name;
                                                                  });
                                                                },
                                                                displayStringForOption:
                                                                    (CompanyName
                                                                            option) =>
                                                                        option
                                                                            .name,
                                                              ),

What is the best option and where is the best option to put the variable and re-render Autocomplete()?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文