如何在Flutter的searchDelegate函数中导入WordPress博客页面的API数据

步骤1：自定义带参数的SearchDelegate #

你需要先自己实现搜索代理类，通过构造函数接收外部传入的新闻数据，示例代码如下：

import 'package:flutter/material.dart';

class NewsSearchDelegate extends SearchDelegate {
  // 存储传入的新闻列表数据
  final List newsArticles;

  // 构造函数，初始化时接收新闻数据
  NewsSearchDelegate(this.newsArticles);

  @override
  List<Widget>? buildActions(BuildContext context) {
    // 搜索框右侧操作区，这里加一个清空输入的按钮
    return [
      IconButton(
        icon: const Icon(Icons.clear),
        onPressed: () => query = '',
      )
    ];
  }

  @override
  Widget? buildLeading(BuildContext context) {
    // 搜索框左侧返回按钮
    return IconButton(
      icon: const Icon(Icons.arrow_back),
      onPressed: () => close(context, null),
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    // 根据输入的关键词过滤新闻列表
    final filterList = newsArticles.where((article) {
      final newsTitle = article['title']['rendered'].toString().toLowerCase();
      return newsTitle.contains(query.toLowerCase());
    }).toList();

    return ListView.builder(
      itemCount: filterList.length,
      itemBuilder: (context, index) {
        final item = filterList[index];
        return ListTile(
          title: Text(item['title']['rendered']),
          // 去除摘要里的HTML标签
          subtitle: Text(item['excerpt']['rendered'].replaceAll(RegExp(r'<[^>]*>'), '')),
        );
      },
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // 搜索建议逻辑，这里直接复用结果逻辑，也可以按需自定义
    if (query.isEmpty) {
      return const Center(child: Text('请输入搜索关键词'));
    }
    return buildResults(context);
  }
}

步骤2：触发搜索时传入API数据 #

在你页面点击搜索按钮的位置，先调用你封装的API接口获取数据，再把数据传给上面自定义的搜索代理即可，示例代码如下：

// 页面AppBar的配置示例
AppBar(
  title: const Text('新闻列表'),
  actions: [
    IconButton(
      icon: const Icon(Icons.search),
      onPressed: () async {
        final apiService = ApiNewsPage();
        try {
          // 先请求拿到新闻列表数据
          final newsList = await apiService.getNewsArticles();
          if (context.mounted) {
            // 把数据传入搜索代理，打开搜索页
            showSearch(
              context: context,
              delegate: NewsSearchDelegate(newsList),
            );
          }
        } catch (e) {
          // 错误提示处理
          if (context.mounted) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text(e.toString())),
            );
          }
        }
      },
    )
  ],
)

如果你不想每次点击搜索都重新请求接口，可以在当前页面初始化时就提前请求好新闻数据存在State中，点击搜索时直接传缓存的数据即可，减少重复请求。

内容的提问来源于stack exchange，提问作者Pimpi Rimpà