开源一夏｜Flutter 实现搜索的三种方式
作者：坚果
- 2022 年 8 月 08 日
本文字数：5268 字
阅读完需：约 17 分钟
示例 1：使用搜索表单创建全屏模式
我们要构建的小应用程序有一个应用程序栏，右侧有一个搜索按钮。按下此按钮时，将出现一个全屏模式对话框。它不会突然跳出来，而是带有淡入淡出动画和幻灯片动画（从上到下）。在圆形搜索字段旁边，有一个取消按钮，可用于关闭模式。在搜索字段下方，我们会显示一些搜索历史记录（您可以添加其他内容，如建议、类别等）。
编码
我们通过定义一个扩展 ModalRoute 类的名为 FullScreenSearchModal 的类来创建完整模式。
main.dart 中的完整源代码及说明：
// 大前端之旅// main.dartimport 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return MaterialApp( // remove the debug banner debugShowCheckedModeBanner: false, title: '大前端之旅', theme: ThemeData( primarySwatch: Colors.green, ), home: const KindaCodeDemo(), ); }}
// this class defines the full-screen search modal// by extending the ModalRoute classclass FullScreenSearchModal extends ModalRoute { @override Duration get transitionDuration => const Duration(milliseconds: 500);
@override bool get opaque => false;
@override bool get barrierDismissible => false;
@override Color get barrierColor => Colors.black.withOpacity(0.6);
@override String? get barrierLabel => null;
@override bool get maintainState => true;
@override Widget buildPage( BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, ) { return Scaffold( body: SafeArea( child: Padding( padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ // implement the search field Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Expanded( child: TextField( autofocus: true, decoration: InputDecoration( contentPadding: const EdgeInsets.symmetric( vertical: 0, horizontal: 20), filled: true, fillColor: Colors.grey.shade300, suffixIcon: const Icon(Icons.close), hintText: 'Search 大前端之旅', border: OutlineInputBorder( borderSide: BorderSide.none, borderRadius: BorderRadius.circular(30)), ), ), ), const SizedBox( width: 10, ), // This button is used to close the search modal TextButton( onPressed: () => Navigator.of(context).pop(), child: const Text('Cancel')) ], ),
// display other things like search history, suggestions, search results, etc. const SizedBox( height: 20, ), const Padding( padding: EdgeInsets.only(left: 5), child: Text('Recently Searched', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), ), const ListTile( title: Text('Flutter tutorials'), leading: Icon(Icons.search), trailing: Icon(Icons.close), ), const ListTile( title: Text('How to fry a chicken'), leading: Icon(Icons.search), trailing: Icon(Icons.close), ), const ListTile( title: Text('大前端之旅'), leading: Icon(Icons.search), trailing: Icon(Icons.close), ), const ListTile( title: Text('Goodbye World'), leading: Icon(Icons.search), trailing: Icon(Icons.close), ), const ListTile( title: Text('Cute Puppies'), leading: Icon(Icons.search), trailing: Icon(Icons.close), ) ], ), ), ), ); }
// animations for the search modal @override Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) { // add fade animation return FadeTransition( opacity: animation, // add slide animation child: SlideTransition( position: Tween<Offset>( begin: const Offset(0, -1), end: Offset.zero, ).animate(animation), child: child, ), ); }}
// This is the main screen of the applicationclass KindaCodeDemo extends StatelessWidget { const KindaCodeDemo({Key? key}) : super(key: key);
void _showModal(BuildContext context) { Navigator.of(context).push(FullScreenSearchModal()); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('大前端之旅'), actions: [ // this button is used to open the search modal IconButton( icon: const Icon(Icons.search), onPressed: () => _showModal(context), ) ]), body: Container(), ); }}
复制代码
示例 2：AppBar 内的搜索字段（最常见于娱乐应用程序）
通常，许多娱乐应用程序（包括 Facebook、Youtube、Spotify 等大型应用程序）默认不显示搜索字段，而是显示搜索图标按钮。按下此按钮时，将显示搜索字段。
我们要制作的演示应用程序包含 2 个屏幕（页面）：HomePage 和 SearchPage。用户可以通过点击搜索图标按钮从主页移动到搜索页面。搜索字段将通过使用 SearchPage 的 AppBar 的 title 参数来实现。
让我们看看它是如何工作的：
编码
./lib/main.dart 中的完整源代码及说明：
// main.dartimport 'package:flutter/material.dart';
void main() { runApp(const MyApp());}
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return MaterialApp( // Remove the debug banner debugShowCheckedModeBanner: false, title: '大前端之旅', theme: ThemeData( primarySwatch: Colors.indigo, ), home: const HomePage()); }}
// Home Pageclass HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('大前端之旅'), actions: [ // Navigate to the Search Screen IconButton( onPressed: () => Navigator.of(context) .push(MaterialPageRoute(builder: (_) => const SearchPage())), icon: const Icon(Icons.search)) ], ), ); }}
// Search Pageclass SearchPage extends StatelessWidget { const SearchPage({Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( // The search area here title: Container( width: double.infinity, height: 40, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(5)), child: Center( child: TextField( decoration: InputDecoration( prefixIcon: const Icon(Icons.search), suffixIcon: IconButton( icon: const Icon(Icons.clear), onPressed: () { /* Clear the search field */ }, ), hintText: 'Search...', border: InputBorder.none), ), ), )), ); }}
复制代码
示例 3：搜索字段和 SliverAppBar
广告搜索是许多电子商务应用程序最重要的功能之一，因此它们通常以最容易识别的方式显示搜索字段，并且从一开始就占用大量空间（亚马逊、Shopee 等）。
编码
// main.dartimport 'package:flutter/material.dart';
void main() { runApp(const MyApp());}
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return MaterialApp( // Remove the debug banner debugShowCheckedModeBanner: false, title: '大前端之旅', theme: ThemeData( primarySwatch: Colors.deepPurple, ), home: const HomePage()); }}
class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key);
@override State<HomePage> createState() => _HomePageState();}
class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Scaffold( body: CustomScrollView( slivers: [ SliverAppBar( floating: true, pinned: true, snap: false, centerTitle: false, title: const Text('大前端之旅'), actions: [ IconButton( icon: const Icon(Icons.shopping_cart), onPressed: () {}, ), ], bottom: AppBar( title: Container( width: double.infinity, height: 40, color: Colors.white, child: const Center( child: TextField( decoration: InputDecoration( hintText: 'Search for something', prefixIcon: Icon(Icons.search), suffixIcon: Icon(Icons.camera_alt)), ), ), ), ), ), // Other Sliver Widgets SliverList( delegate: SliverChildListDelegate([ const SizedBox( height: 400, child: Center( child: Text( 'This is an awesome shopping platform', ), ), ), Container( height: 1000, color: Colors.pink, ), ]), ), ], ), ); }}
复制代码
结论
您已经研究了在 Flutter 中实现全屏搜索框的端到端示例。这种搜索方式如今非常流行，您可以在许多大型应用程序和移动网站中注意到它。通过查看以下文章，继续学习并获得更多移动开发经验：
划线
评论
复制
发布于: 刚刚阅读数: 3
版权声明: 本文为 InfoQ 作者【坚果】的原创文章。
原文链接:【http://xie.infoq.cn/article/7af785f7a9b1781695ba6f592】。文章转载请联系作者。
坚果
关注
此间若无火炬，我便是唯一的光 2020.10.25 加入
公众号：“大前端之旅”，华为云享专家，InfoQ签约作者，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。
评论