当前位置：网站首页>开源一夏｜Flutter实现搜索的三种方式

开源一夏｜Flutter实现搜索的三种方式

2022-08-08 08:29:00 【InfoQ】

示例 1：使用搜索表单创建全屏模式

我们要构建的小应用程序有一个应用程序栏，右侧有一个搜索按钮。按下此按钮时，将出现一个全屏模式对话框。它不会突然跳出来，而是带有淡入淡出动画和幻灯片动画（从上到下）。在圆形搜索字段旁边，有一个

取消

按钮，可用于关闭模式。在搜索字段下方，我们会显示一些搜索历史记录（您可以添加其他内容，如建议、类别等）。

编码

我们通过定义一个扩展 ModalRoute 类的名为

FullScreenSearchModal的类来创建完整模式。

main.dart

中的完整源代码及说明：

// 大前端之旅
// main.dart
import '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 class
class 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 application
class 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.dart
import '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 Page
class 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 Page
class 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.dart
import '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,
 ),
 ]),
 ),
 ],
 ),
 );
 }
}