Flutter实现搜索的三种方式

Flutter实现搜索的三种方式

示例 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 animation, Animation 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 animation, Animation secondaryAnimation, Widget child) { // add fade animation return FadeTransition( opacity: animation, // add slide animation child: SlideTransition( position: Tween( 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 等大型应用程序）默认不显示搜索字段，而是显示搜索图标按钮。按下此按钮时，将显示搜索字段。

让我们看看它是如何工作的：

编码

./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 createState() => _HomePageState();}class _HomePageState extends State { @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 中实现全屏搜索框的端到端示例。这种搜索方式如今非常流行，您可以在许多大型应用程序和移动网站中注意到它。通过查看以下文章，继续学习并获得更多移动开发经验：

~~~~

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。