自定义 flutter 搜索小部件的搜索结果选择中的问题 - flutter web

Question

我为 flutter web 构建了一个简单的搜索小部件。一切正常，但在我得到搜索结果后，我必须在结果上单击两次才能 select 特定的搜索结果。请帮我找出问题所在。我试了几天但没有运气。我使用的是 flutter 2.5.2 版本。

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MaterialApp(
    home: SearchView(),
  ));
}

class SearchView extends StatefulWidget {
  @override
  State<SearchView> createState() => _SearchViewState();
}

class _SearchViewState extends State<SearchView> {
  String searchResult = '';
  final textController = TextEditingController();
  final List<String> data = ['Result 1', 'Result 2', 'Result 3', 'Result 4'];

  Future<List<String>> loadData() {
    return Future.delayed(Duration(seconds: 1), () {
      if (this.textController.text.trim().length != 0) {
        return data;
      } else {
        return [];
      }
    });
  }

  @override
  void initState() {
    this.textController.addListener(this._onTextChanged);
    super.initState();
  }

  void _onTextChanged() {
    print('text cahnged');
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Brand'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            TextFormField(
              controller: this.textController,
            ),
            FutureBuilder(
              future: loadData(),
              builder:
                  (BuildContext context, AsyncSnapshot<List<String>> snapshot) {
                if (snapshot.connectionState == ConnectionState.done &&
                    snapshot.hasData) {
                  print("future build");
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      for (String result in snapshot.data)
                        InkWell(
                          onTap: () {
                            print('Clicked');
                            setState(() {
                              this.textController.clear();
                              this.searchResult = result;
                            });
                          },
                          child: Text(result),
                        ),
                    ],
                  );
                } else {
                  return CircularProgressIndicator();
                }
              },
            ),
            Text('Search result is ${searchResult}'),
          ],
        ),
      ),
    );
  }
}

请帮我解决这个问题。谢谢，祝你有愉快的一天

Answer 1

这种奇怪的行为是由于抖动 issue 引起的。在 flutter 2.5 版本之前，Text change listeners 只监听文本变化。但是从 2.5 版本开始，监听器也监听焦点改变事件。需要在 TextFormField 中使用 onChanged 方法，直到 flutter 解决问题。

自定义 flutter 搜索小部件的搜索结果选择中的问题 - flutter web

Issue in custom flutter search widget's search results selection - flutter web

dart

flutter

flutter-web