flutter 跳转到白屏搜索页面方法showSearch

跳转到白屏搜索页面方法
	1、在回调函数中设置方法
		showSearch(context: context, delegate: 搜索页面的类());
	
	2、创建搜索页面的类
		(1)继承SearchDelegate
		
		(2)重写四个方法
		其中:query为搜索框的内容
		    close(context, null);  关闭搜索界面
			
		页面搜索框右上角显示内容方法
		@override
		 List<Widget> buildActions(BuildContext context){
		    return [组件内容];
		  }
		
		页面搜索框左上角显示内容方法
		   @override
		    Widget buildLeading(BuildContext context) {
		      return 组件;
		    }
		
		点击键盘确认后显示的内容
		  @override
		    Widget buildResults(BuildContext context){
		      return 组件;
		    }
		
		输入框下方的显示内容，一般为辅助内容列表，内容改变重复调用
		  @override
		  Widget buildSuggestions(BuildContext context) {
		    // TODO: implement buildSuggestions

		    return ListView.builder(
		      itemCount: sugList.length,
		      itemBuilder: (context,index)=>ListTile(
		      		...
		         ),
		    );
  		}

代码示例:
一个可以搜索同时下方辅助内容动态显示的案例

import 'package:flutter/gestures.dart';
import "package:flutter/material.dart";
import 'package:flutter/rendering.dart';
import "drag.dart";
import 'dart:ui';

import 'page/1.dart';
import 'page/2.dart';
import 'page/3.dart';
import 'xuan.dart';

void main()
{
  runApp(App());
}
class App extends StatelessWidget {
  const App({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return App2();
  }
}

class App2 extends StatefulWidget {
  App2({Key key}) : super(key: key);

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App2> {

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home:Scaffold(
        appBar:AppBar(
          title: Text('小案例'),
        ),
        
        body:Home(),
      
      //去掉右上角的debug贴纸
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      );
  }
}


class Home extends StatefulWidget {

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {



  @override
  Widget build(BuildContext context) {
    return Container(
      // width: double.infinity,
       child:Column(
         children: <Widget>[
           IconButton(
              icon: Icon(Icons.search),
              //回调跳转到搜索页面
              onPressed: (){
                showSearch(context: context, delegate: search());
              },
            ),
         ],
       )
       
    );
  }
}

//继承SearchDelegate
class search extends SearchDelegate{
//数据内容
  final List list=[
    "jjjj-2dawd",
    "jjj222-awdwd",
    "jj333-cccaw",
    'gg-vva',
    "gg22-bdfaw",
    "gg333-lajd"
  ];
  final rege=[
    "推荐-1",
    "推荐-2"
  ];
  
  //重写搜索框右上角方法
  @override
  List<Widget> buildActions(BuildContext context){
    return [
    //放置按钮，点击时，将搜索框清空
      IconButton(
        icon:Icon(Icons.clear),
        onPressed: (){
          query="";
        },
      )
    ];
  }

	//重写左上角方法
   @override
    Widget buildLeading(BuildContext context) {
      return IconButton( //返回动态按钮
        icon:AnimatedIcon(
          icon:AnimatedIcons.menu_arrow,
          progress: transitionAnimation,
        ),
        onPressed: (){ //回调中调用close方法，关闭搜索页面
          close(context, null);
        },
      );
    }
//重写键盘点击确认后方法
  @override
    Widget buildResults(BuildContext context){
      return Container( //点击确认后会关闭搜索页面，并显示如下组件内容
        width: 100,
        height: 100,
        child: Card(
          color: Colors.brown,
          child: Center(
            child: Text(query),
          ),
        ),
      );
    }
    
	//重写输入过程方法,在输入过程不断调用
  @override
  Widget buildSuggestions(BuildContext context) {
    // TODO: implement buildSuggestions
	
	//输入框内容为空，数据数组为rege，后面ListView.builder动态生成
	//输入框不为空时,利用数组.where()过滤器,返回满足将输入内容作为开头的数组中的字符串,再toList方法转换成数组
    final sugList=query.isEmpty ? rege:list.where((input)=>input.startsWith(query)).toList();
    
    //调用动态列表生成数据
    return ListView.builder(
      itemCount: sugList.length,
      itemBuilder: (context,index)=>ListTile(
      	//利用富文本组件,将字符串变成可以设置各个片段样式以及事件的字符串
        title: RichText(
          text: TextSpan(
          //截取数组中已经输入的内容的长度的字符串,并修改其样式
            text: sugList[index].substring(0,query.length),
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w900
            ),
            children: [
              TextSpan(
              //截取数组中的每条字符串输入内容长度之后的字符，并修改其样式
                text: sugList[index].substring(query.length),
                style: TextStyle(color: Colors.grey),
              
              )
            ]
          ),
        ),
      ),  
    );
  }
}

效果图：