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

柔情只为你懂 2021-07-24 22:51 631阅读 0赞

跳转到白屏搜索页面方法
    	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),
                  
                  )
                ]
              ),
            ),
          ),  
        );
      }
    }

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/ec29371ecb8f495a826612c6462c3e78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/e91e52cc1cad439c8b5be5c43bd0813c.png