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

【问题标题】：Issue in custom flutter search widget's search results selection - flutter web自定义颤振搜索小部件的搜索结果选择中的问题 - flutter web
【发布时间】：2021-12-02 14:20:07
【问题描述】：

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

darpad link 运行代码

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

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

【问题讨论】：

标签： flutter dart flutter-web

【解决方案1】：

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

【讨论】：