Android?Flutter實現搜索的三種方式詳解
示例 1 :使用搜索表單創(chuàng)建全屏模式
我們要構建的小應用程序有一個應用程序欄,右側有一個搜索按鈕。按下此按鈕時,將出現一個全屏模式對話框。它不會突然跳出來,而是帶有淡入淡出動畫和幻燈片動畫(從上到下)。在圓形搜索字段旁邊,有一個取消按鈕,可用于關閉模式。在搜索字段下方,我們會顯示一些搜索歷史記錄(您可以添加其他內容,如建議、類別等)。
編碼
我們通過定義一個擴展 ModalRoute 類的名為FullScreenSearchModal的類來創(chuàng)建完整模式。
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, ), ]), ), ], ), ); } }
結論
您已經研究了在 Flutter 中實現全屏搜索框的端到端示例。這種搜索方式如今非常流行,您可以在許多大型應用程序和移動網站中注意到它。
到此這篇關于Android Flutter實現搜索的三種方式詳解的文章就介紹到這了,更多相關Android Flutter搜索內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Android用RecyclerView實現動態(tài)添加本地圖片
本篇文章主要介紹了Android用RecyclerView實現動態(tài)添加本地圖片,具有一定的參考價值,有興趣的可以了解一下2017-08-08Android開發(fā)Jetpack組件ViewModel使用講解
這篇文章主要介紹了Android?Jetpack架構組件?ViewModel詳解,ViewModel類讓數據可在發(fā)生屏幕旋轉等配置更改后繼續(xù)存在,ViewModel類旨在以注重生命周期的方式存儲和管理界面相關的數據,感興趣可以來學習一下2022-08-08