Question

这个问题已经持续了太长时间。我尝试使用SimpleAutoComplete或TypeAheadField，但是我遇到了同样的问题。

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

状态错误：元素太多
在我的商品中返回空值
从不采取行动

自动完成：

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,
          ),
        ),
      );

TypeAhead：

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,
                ),
              ],
            ),

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()),
                  ),
                ),
              );
            },

SimpleAutocomplete的问题：状态错误：元素过多

1 个答案: