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 {@overrideWidget build(BuildContext context) {return Container(height: 32,  //搜索框高度decoration: BoxDecoration(color: const Color(0xFFF2F2F2),  // 搜索框背景色-灰色borderRadius: BorderRadius.circular(16), // 设置搜索框圆角),child: Row(children: [const SizedBox(width: 32,height: 24,child: Icon(Icons.search, size: 16, color: Color(0xFF999999)),  //搜索框图标),TextField(readOnly: true,  //只读不可编辑，点击搜索框直接跳转搜索页decoration: const InputDecoration(hintText: '人工智能',  //搜索提示词hintStyle: TextStyle(fontSize: 12, color: Color(0xFF999999)),  //搜索框文字样式),onTap: () {Navigator.of(context).push(_createRoute());  //点击搜索框，路由到搜索页（动画效果: 右侧滑出）}, //onTap),],),);}//页面切换动画特效-右侧滑出Route _createRoute() {return PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) => SearchDetail(),  //右侧弹出搜索详情页transitionsBuilder: (context, animation, secondaryAnimation, child) {var begin = const Offset(1.0, 0.0);  //页面进入的起点坐标var end = Offset.zero;    //页面进入的终点坐标const curve = Curves.ease; var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve)); //return SlideTransition(position: animation.drive(tween), child: child,);},);}}

2. 搜索详情页 searchDetail.dart  

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';/*搜索详情页*/
class SearchDetail extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: const Color(0xFFFBFBFB),  // 搜索框背景色automaticallyImplyLeading: false,  //隐藏左侧默认返回按钮title: Container(height: 32,decoration: BoxDecoration(color: const Color(0xFFF2F2F2),  // 搜索框背景色borderRadius: BorderRadius.circular(16), // 设置搜索框圆角),child: Row(children: const [SizedBox(width: 32,height: 24,child: Icon(Icons.search, size: 16, color: Color(0xFF999999)),  //搜索框图标),TextField(decoration: InputDecoration(hintText: '人工智能',hintStyle: TextStyle(fontSize: 12, color: Color(0xFF999999)),  //搜索框文字),),],),),actions: [Padding(padding: const EdgeInsets.fromLTRB(0, 8, 6, 0), //间距左，上，右，下child: cancelText(context),  // 取消，回退上一页)],),body: Column(crossAxisAlignment:  CrossAxisAlignment.start, //文字左对齐children:  [const Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 10),child: Text('搜索历史', style: TextStyle(fontWeight: FontWeight.w600)) //字体加粗),Wrap(spacing: 10, // 搜索关键词的间距runSpacing: 10, // 搜索关键词的间距children: KeyWords()  // 关键词列表)]));}// 取消-富文本点击方式实现Text cancelText(BuildContext context){return Text.rich(TextSpan(text: '取消',style: const TextStyle(height: 2, color: Colors.blue, fontSize: 14, fontWeight: FontWeight.w600),recognizer: TapGestureRecognizer()..onTap = () {Navigator.pop(context);},));}// 关键词列表List<Widget> KeyWords() => List.generate(9, (index) {return Container(padding: const EdgeInsets.all(6),decoration: BoxDecoration(color: const Color(0xFFF2F2F2),  // 搜索框背景色borderRadius: BorderRadius.circular(4), // 设置搜索框圆角),child: Text("关键词 $index",style: const TextStyle(color: Color(0xFF999999), fontSize: 14, height: 1, fontWeight: FontWeight.w300)));});}

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

import 'package:flutter/material.dart';
import 'package:flutter_play/recommend.dart';
import 'package:flutter_play/search.dart';/*首页
* 顶部搜索框 SearchAppBar
* 顶部导航栏 TabBar
* 导航栏嵌入推荐页：RecommendPage 是图文列表 ListView
* */
class IndexPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(backgroundColor: const Color(0xFFFBFBFB), //顶部背景色title: SearchAppBar(),  // 顶部搜素框（自定义组件）bottom: const TabBar(labelColor: Colors.blue,  //选中时颜色unselectedLabelColor: Colors.black26, //未选中时颜色tabs: [Tab(text: '推荐'),Tab(text: '资讯'),Tab(text: '科技'),],),),body: TabBarView(children: [RecommendPage(),  // 推荐页const Icon(Icons.directions_transit),const Icon(Icons.directions_bike),],),),);}
}

工程中的底部导航+顶部导航+图文列表完整代码，在系列文章第四篇

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

END...