flutter - SimpleAutocomplete 的问题：坏状态：太多元素颤动

Question

这是一个持续太久的问题。我尝试使用 SimpleAutoComplete 或 TypeAheadField 但我遇到了同样的问题。

简单的自动完成

提前输入

有两个元素，我的排序是成功的，但是当我点击元素时，我有这三种可能性：

• 坏状态：元素太多
• 在我的项目中返回 null
• 永远不要采取行动

自动完成：

final _nameContributorTextFormFieldDetailsCreateMission = Padding(
        padding: EdgeInsets.only(top: 12.0, left: 12.0, bottom: 12.0),
        child: SizedBox(
          height: 100,
          width: 300,
          child: SimpleAutocompleteFormField<Employee>(
            key: key,
            controller: _searchText2Controller,
            focusNode: _focusNode,
            itemBuilder: (context, contributor) => Padding(
              padding: EdgeInsets.all(8.0),
              child: Row(
                children: <Widget>[
                  Text(
                    contributor.lastname,
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Padding(
                    padding: EdgeInsets.only(left: 4.0),
                    child: Text(contributor.firstname),
                  ),
                ],
              ),
            ),
            onSearch: (search) async => model.employees
                .where((contributor) =>
                    contributor.firstname
                        .toLowerCase()
                        .contains(search.toLowerCase()) ||
                    contributor.lastname
                        .toLowerCase()
                        .contains(search.toLowerCase()))
                .toList(),
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Nom',
            ),
            itemFromString: (string) => model.employees.singleWhere(
                (contributor) =>
                    contributor.firstname.toLowerCase() == string.toLowerCase(),
                orElse: () => null),
            onFieldSubmitted: (item) {
              print(item);
              _searchTextController.text = "${item.firstname}";
            },
            onSaved: (item) {
              print(item);
            },

            /*onChanged: (Store value) {
            model.store = value;
            model.setClientOnChangedValue(model.store);
          },
          onSaved: (Store value) {
            model.store = value;
            model.setClientOnSavedValue(model.store);
          }, */
//          validator: (contributor) => contributor == null ? 'Invalid' : null,
          ),
        ),
      );

提前输入：

Padding(
        padding: EdgeInsets.only(top: 12.0, left: 12.0, bottom: 12.0),
        child: SizedBox(
          width: 300,
          child: TypeAheadField(
            textFieldConfiguration: TextFieldConfiguration(
              autofocus: true,
              controller: model.typeAheadController,
              decoration: InputDecoration(
                  border: OutlineInputBorder(), labelText: 'Client'),
            ),
            suggestionsCallback: (pattern) async {
              print("toto $pattern");
              return await model.getSuggestionsClientName(pattern);
            },
            itemBuilder: (context, suggestion) {
              return ListTile(
                title: Text(suggestion.toString()),
              );
            },
            transitionBuilder: (context, suggestionsBox, controller) {
              print("SuggestionsBox : $suggestionsBox");
              print(controller);
              return suggestionsBox;
            },
            onSuggestionSelected: (suggestion) {
              print("onclick");
              model.typeAheadController.text = suggestion;
            },
          ),
        ),
      );

或者最后一次尝试，我死了我的排序方法：（这个方法返回项目 null）

ListView(
              children: <Widget>[
                SimpleAutocompleteFormField<Employee>(
                  decoration: InputDecoration(
                      labelText: 'Person', border: OutlineInputBorder()),
                  suggestionsHeight: 80.0,
                  itemBuilder: (context, person) => Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(person.firstname,
                              style: TextStyle(fontWeight: FontWeight.bold)),
                          Text(person.lastname)
                        ]),
                  ),
                  onSearch: (search) async => model.employees
                      .where((person) =>
                          person.firstname
                              .toLowerCase()
                              .contains(search.toLowerCase()) ||
                          person.lastname
                              .toLowerCase()
                              .contains(search.toLowerCase()))
                      .toList(),
                  itemFromString: (string) => model.employees.singleWhere(
                      (person) =>
                          person.firstname.toLowerCase() ==
                          string.toLowerCase(),
                      orElse: () => null),
                  onFieldSubmitted: (item){
                    print(item);
                  },
                  validator: (person) =>
                      person == null ? 'Invalid person.' : null,
                ),
              ],
            ),

标签： flutterflutter-layoutflutter-dependenciesflutter-animationflutter-web

Answer 1

解决方案 ：

因为在 FlutterWeb 中，这个小部件是错误的。

对于 TypeAhead

itemBuilder: (context, suggestion) {
              return GestureDetector(
                onPanDown: (_) {
                  model.typeAheadController.text = suggestion;
                },
                child: Container(
                  color: Colors.white,
                  child: ListTile(
                    title: Text(suggestion.toString()),
                  ),
                ),
              );
            },