（Flutter 十六）自定义导航栏效果

自定义导航栏实现的效果如下图所示，点击搜索按钮，进入搜索页面。下面显示默认搜索内容，点击左侧的返回按钮可以返回到上一级页面。输入的内容如果有匹配，被匹配的字母会加粗显示。

如图所示，点击搜索按钮进入下面搜索页面 点击箭头返回就会回到上一页 如果搜索的内容在搜索中已经存在，会根据输入的字母添加

1、main.dart

import 'package:flutter/material.dart';
import 'search_bar_demo.dart';

void main() =>runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: SearchBarDemo(),
    );
  }
}

2、asset.dart
里面有两个数组，searchList存放的是搜索的内容，recentList里是最近搜索过的内容。在实际应用中这两个数据应该自己获取。

const searchList = [
  "Text_1",
  "Text_2",
  "Fairy",
  "Beauty",
];

const recentSuggest = [
  "Demo-1",
  "Demo-2"
];

3、

import 'package:flutter/material.dart';
import 'asset.dart';

class SearchBarDemo extends StatefulWidget {
  @override
  _SearchBarDemoState createState() => _SearchBarDemoState();
}

class _SearchBarDemoState extends State<SearchBarDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SearchBar Demo'),
        actions: <Widget>[ //searchbar 右侧的图标
          IconButton(
            icon: Icon(Icons.search),
            onPressed: (){
              showSearch(context: context, delegate: searchBarDelegate());
            },
          )
        ],
      ),
    );
  }
}

class searchBarDelegate extends SearchDelegate<String> {
  @override
  //重写搜索栏中右侧的图标X
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () => query = "", //点击X按钮，搜索的值置为空
      )
    ];
  }
   @override
//重写搜索页左侧的返回按钮
    Widget buildLeading(BuildContext context) {
      return IconButton(
        icon: AnimatedIcon(
          icon: AnimatedIcons.menu_arrow, progress: transitionAnimation,
        ),
        onPressed: ()=>close(context,null), //点击图标就关闭之前的页面
      );
  }

  @override
  //重写搜索结果
  Widget buildResults(BuildContext context){
      return Container(
        width: 100.0,
        height: 100.0,
        child: Card(
          color: Colors.redAccent,
          child: Center(
            child: Text(query),
          ),
        ),
      );
  }

  @override
  //重写搜索内容
  Widget buildSuggestions(BuildContext context){
      final suggestionList = query.isEmpty
          ? recentSuggest
          : searchList.where((input)=> input.startsWith(query)).toList();
      return ListView.builder( //这是一个动态列表
        itemCount: suggestionList.length,
        itemBuilder: (context, index)=> ListTile(
          title: RichText( //富文本
            text: TextSpan( //给搜索到的字符加粗显示
              text: suggestionList[index].substring(0,query.length),
              style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold
              ),
              children:[
                TextSpan(
                  text: suggestionList[index].substring(query.length),
                  style: TextStyle(color: Colors.grey)
                )
              ]
            )
          )
        ),
      );
  }
}