Flutter searchDelegate -导航并在另一个页面中显示结果

基础概念

SearchDelegate 是 Flutter 中的一个功能，它提供了一个可定制的搜索框，允许用户在应用中进行搜索操作。当用户输入搜索关键词时，SearchDelegate 可以展示相关的搜索建议，并且可以通过 onSearchChanged 回调函数来响应用户的输入变化。

类型

SearchDelegate 可以分为几种类型：

Simple：最简单的搜索代理，只显示一个搜索框。
Persistent：始终显示在屏幕顶部的搜索代理。
Modal：以模态窗口的形式显示搜索代理。

应用场景

电商应用：用户可以在搜索框中输入商品名称，快速找到商品列表。
社交媒体：用户可以搜索特定的帖子或用户。
新闻应用：用户可以搜索特定的新闻文章。

示例代码

以下是一个简单的示例，展示了如何在 Flutter 中使用 SearchDelegate 并在另一个页面中显示搜索结果：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Search Delegate Example'),
        ),
        body: SearchPage(),
      ),
    );
  }
}

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('Search Page'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () async {
              final String selectedResult = await showSearch(
                context: context,
                delegate: MySearchDelegate(),
              );
              if (selectedResult != null) {
                // Navigate to the result page with the selected result
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => ResultPage(result: selectedResult),
                  ),
                );
              }
            },
          ),
        ],
      ),
      body: Center(
        child: Text('Press the search icon to search'),
      ),
    );
  }
}

class MySearchDelegate extends SearchDelegate<String> {
  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () {
          query = '';
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, null);
      },
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    if (query.isEmpty) {
      return Center(
        child: Text('Please enter a search term.'),
      );
    } else {
      // Simulate a list of search results
      List<String> results = ['Result for $query 1', 'Result for $query 2'];
      return ListView.builder(
        itemCount: results.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(results[index]),
            onTap: () {
              close(context, results[index]);
            },
          );
        },
      );
    }
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // Simulate a list of suggestions based on the query
    List<String> suggestions = ['Suggestion for $query 1', 'Suggestion for $query 2'];
    return ListView.builder(
      itemCount: suggestions.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(suggestions[index]),
          onTap: () {
            close(context, suggestions[index]);
          },
        );
      },
    );
  }
}

class ResultPage extends StatelessWidget {
  final String result;

  ResultPage({required this.result});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Result'),
      ),
      body: Center(
        child: Text('Selected result: $result'),
      ),
    );
  }
}