Flutter基于TextField实现数据库搜索功能故障排查

首先看你的代码，主要有几个核心问题导致搜索功能无法正常工作：

1. 搜索关键词没有触发UI更新 #

你在TextField的onChanged里调用searchBar(data)，但这只是创建了一个新的Widget实例，并没有把它替换到当前的Widget树中。Flutter是声明式UI，必须通过状态变量来触发UI重建，才能展示新的搜索结果。

2. FutureBuilder的future被重复执行 #

每次调用searchBar函数时，都会重新执行DBHelper().getTasks()，这会导致不必要的数据库重复查询，还可能因为异步时序问题引发UI异常。应该把数据库查询的Future提前初始化（比如在initState阶段），而不是每次build都创建新的Future。

3. map函数未返回有效Widget #

你的data.map((task) { ... })里只做了打印操作，没有返回任何Widget，所以Column的children是空的，自然看不到任何搜索结果的UI展示。

修复后的完整代码示例 #

我们把整个页面改成StatefulWidget，用状态变量保存搜索关键词，同时优化数据库查询逻辑：

class SearchTaskPage extends StatefulWidget {
  const SearchTaskPage({Key? key}) : super(key: key);

  @override
  State<SearchTaskPage> createState() => _SearchTaskPageState();
}

class _SearchTaskPageState extends State<SearchTaskPage> {
  // 保存用户输入的搜索关键词
  String _searchQuery = '';
  // 提前初始化数据库查询Future，避免重复请求
  late Future<List<Task>> _tasksFuture;

  @override
  void initState() {
    super.initState();
    _tasksFuture = DBHelper().getTasks();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildSearchAppBar(),
      body: _buildSearchResults(),
    );
  }

  Widget _buildSearchAppBar() {
    return AppBar(
      title: TextField(
        onChanged: (input) {
          // 更新搜索关键词，触发UI重建
          setState(() {
            _searchQuery = input;
          });
        },
        decoration: const InputDecoration(
          hintText: '输入任务标题搜索',
          border: InputBorder.none,
        ),
      ),
    );
  }

  Widget _buildSearchResults() {
    return FutureBuilder<List<Task>>(
      future: _tasksFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 数据加载中的状态
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          // 数据加载失败的状态
          return Center(child: Text('加载失败: ${snapshot.error}'));
        } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
          // 无数据的状态
          return const Center(child: Text('暂无任务数据'));
        }

        // 根据搜索关键词过滤任务
        final matchedTasks = snapshot.data!
            .where((task) => task.title.contains(_searchQuery))
            .toList();

        // 用ListView.builder展示结果，避免数据过多时溢出
        return ListView.builder(
          itemCount: matchedTasks.length,
          itemBuilder: (context, index) {
            final task = matchedTasks[index];
            return ListTile(
              title: Text(task.title),
              subtitle: Text(task.name),
              // 这里可以添加更多任务信息的展示
            );
          },
        );
      },
    );
  }
}

额外优化说明 #

• 我把匹配逻辑改成了contains模糊匹配，比完全相等的==更符合普通用户的搜索习惯，如果你需要精确匹配，改回task.title == _searchQuery即可。
• 添加了加载中、错误、无数据的状态处理，提升整体用户体验。
• 使用ListView.builder代替Column，避免任务数据过多时出现页面溢出问题。

内容的提问来源于stack exchange，提问作者Rostyk