欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android?Flutter實現搜索的三種方式詳解

 更新時間:2022年08月08日 08:49:20   作者:大前端之旅  
這篇文章主要為大家詳細介紹了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 個屏幕(頁面):HomePageSearchPage。用戶可以通過點擊搜索圖標按鈕從主頁移動到搜索頁面。搜索字段將通過使用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實戰(zhàn)項目之實現一個簡單計算器

    Android實戰(zhàn)項目之實現一個簡單計算器

    隨著移動互聯網的普及,手機應用程序已經成為人們生活中不可或缺的一部分,計算器是一類被廣泛使用的應用程序之一,這篇文章主要給大家介紹了關于Android實戰(zhàn)項目之實現一個簡單計算器的相關資料,需要的朋友可以參考下
    2023-10-10
  • Android OKHttp3攔截器的使用方法

    Android OKHttp3攔截器的使用方法

    本篇文章主要介紹了Android OKHttp3攔截器的使用方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-03-03
  • Android 對Map按key和value分別排序的實例

    Android 對Map按key和value分別排序的實例

    下面小編就為大家?guī)硪黄狝ndroid 對Map按key和value分別排序的實例。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-12-12
  • Android用RecyclerView實現動態(tài)添加本地圖片

    Android用RecyclerView實現動態(tài)添加本地圖片

    本篇文章主要介紹了Android用RecyclerView實現動態(tài)添加本地圖片,具有一定的參考價值,有興趣的可以了解一下
    2017-08-08
  • Android中捕捉menu按鍵點擊事件的方法

    Android中捕捉menu按鍵點擊事件的方法

    這篇文章主要介紹了Android中捕捉menu按鍵點擊事件的方法,涉及Android響應menu菜單項點擊事件的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • Android AIDL中Map參數傳遞的問題詳解

    Android AIDL中Map參數傳遞的問題詳解

    這篇文章主要給大家介紹了關于Android AIDL中Map參數傳遞問題的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友下面來一起看看吧。
    2017-12-12
  • Android之Gallery使用例子

    Android之Gallery使用例子

    本篇文章主要介紹了Android之Gallery使用例子,Gallery用來顯示圖片列表,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-01-01
  • Android實現3D標簽云效果

    Android實現3D標簽云效果

    這篇文章主要為大家詳細介紹了Android實現3D標簽云效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-05-05
  • Android開發(fā)Jetpack組件ViewModel使用講解

    Android開發(fā)Jetpack組件ViewModel使用講解

    這篇文章主要介紹了Android?Jetpack架構組件?ViewModel詳解,ViewModel類讓數據可在發(fā)生屏幕旋轉等配置更改后繼續(xù)存在,ViewModel類旨在以注重生命周期的方式存儲和管理界面相關的數據,感興趣可以來學習一下
    2022-08-08
  • Kotlin語言使用WebView示例介紹

    Kotlin語言使用WebView示例介紹

    隨著后臺技術的不斷發(fā)展,App前端的應用都布置了Web頁面的界面,這個界面就是由WebView組件渲染出來的。WebView由如下優(yōu)點:可以直接顯示和渲染Web頁面或者網頁;可以直接調用網絡上或者本地的html文件,也可以和JavaScript交互使用
    2022-09-09

最新評論