Flutter系列（八）搜索框详解

底部导航+顶部导航+图片列表的完整代码

Flutter系列（四）底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客

目录

一、前言

二、搜索框实现方案

三、完整工程代码

1. 自定义的搜索框组件SearchAppBar   search.dart   

2. 搜索详情页 searchDetail.dart  

3. 在首页index.dart中，使用搜索框 SearchAppBar

---

一、前言

        本文实现当前主流app的搜索框：点击搜索框右侧滑动出搜索页，搜索页中有关键词，样式如图所示，图1是嵌入搜索框的首页，图2是点击搜索框后的搜索页

                                     

 二、搜索框实现方案

            1）搜索框：使用Container组件构建一个灰色圆角框，框内嵌入搜索图标Icon+文本编辑TextField，文本编辑这里设为禁用readOnly: true，真正的搜索在搜索页输入

           2） 搜索页：是一个普通页面，同样嵌入一个搜索框这里是可以编辑的，还有搜索历史的关键词

           3）页面切换：使用了动画特效，搜索页从右侧滑出（大部分的app都是这样的效果）

三、完整工程代码

 1. 自定义的搜索框组件SearchAppBar   search.dart   

import 'package:flutter/material.dart';
import 'package:flutter_play/searchDetail.dart';

/*搜索页*/
class SearchAppBar extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      height: