Android Flutter实现搜索的三种方式详解

目录
  • 示例 1 :使用搜索表单创建全屏模式
    • 编码
  • 示例 2:AppBar 内的搜索字段(最常见于娱乐应用程序)
    • 编码
  • 示例 3:搜索字段和 SliverAppBar
    • 编码
  • 结论

示例 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 个屏幕(页面):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搜索内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-08-06

Flutter实现自定义搜索框AppBar的示例代码

目录 介绍 效果图 实现步骤 完整源码 总结 介绍 开发中,页面头部为搜索样式的设计非常常见,为了可以像系统AppBar那样使用,这篇文章记录下在Flutter中自定义一个通用的搜索框AppBar记录. 功能点: 搜索框.返回键.清除搜索内容功能.键盘处理. 效果图 实现步骤 首先我们先来看下AppBar的源码,实现了PreferredSizeWidget类,我们可以知道这个类主要是控制AppBar的高度的,Scaffold脚手架里的AppBar的参数类型就是PreferredSizeWidge

Android实现模拟搜索功能

本文实例为大家分享了Android实现模拟搜索功能的具体代码,供大家参考,具体内容如下 先看效果图,合适了再接着往下看: 我们看到的这个页面,是由两部分组成,顶部的自定义的搜索框,和listView组成. 首先我们来实现布局页面,自定义搜索框,和设置listView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andr

Android实现搜索历史功能

本文实例为大家分享了Android实现搜索历史的具体代码,供大家参考,具体内容如下 SharedPreferences实现本地搜索历史功能,覆盖搜索重复的文本,可清空 1. 判断搜索内容是否含表情,不需要可以不判断 /** * 校验字符串是否含有表情 * @param content * @return */ public static boolean hasEmoji(String content){ Pattern pattern = Pattern.compile("[\ud83c\udc

Android本地实现搜索历史记录

本文实例为大家分享了Android本地实现搜索历史记录的具体代码,供大家参考,具体内容如下 一.自定义搜索历史记录 本地实现搜索历史记录有很多种方法,下面不多说了,我们来用SQLite来实现此功能,直接上完整代码:点击下载源码 效果一: 效果二: 1.MainActivity主函数 package com.example.administrator.searchapplication; import android.support.v7.app.AppCompatActivity; import

Flutter自定义搜索框效果

本文实例为大家分享了Flutter自定义搜索框效果的具体代码,供大家参考,具体内容如下 效果 实现方式 import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; import 'package:keduo/base/baseSize.dart'; import 'package:keduo/utils/icon_utils.dart'; class SearchBarWidget extends Stateful

Android实现简单动态搜索功能

目录 前言 一.addTextChangedListener 二.本文案例 1.介绍一下SearchView的一些方法 2.准备数据 3.初始化以及填充数据 4.在SearchView中用户输入字符时激发方法里写入简单逻辑 三.源码 前言 提到Android的动态搜索,大多应该会想到EditText的文本改变的监听器(addTextChangedListener),本文会简单介绍一下,但是本文介绍的是SearchView+Listview的实现. 效果图: 一.addTextChangedLis

Flutter自定义Appbar搜索框效果

本文实例为大家分享了Flutter自定义Appbar搜索框效果的具体代码,供大家参考,具体内容如下 首先看一下实现本次实现的效果. 本来想直接偷懒从flutter pub上找个能用的使用起来,但是看了下发现都与目前ui效果相差很大,于是乎决定自己实现一个.整体的话比较简单,本来也是为了练手而做的. 为了方便处理statusbar的高度适配,于是乎直接依托于Appbar进行了实现,这样就可以不用处理状态栏适配了. class _HotWidgetState extends State<HotWid

如何利用Flutter仿写微信搜索页效果

目录 效果图 顶部搜索栏 SearchBar 实现细节 左边搜索框实现 右边取消按钮实现 内容的检索 内容的传递 内容的检索 搜索列表实现 总结 效果图 如上图所示,我们用 Flutter 来仿写搜索页面,这里聊天首页点击搜索栏会跳转到搜索页,搜索页面包含顶部搜索框跟底部 ListView,在搜索框内我们输入搜索词会检索聊天列表模型中 name 属性中包含搜索词的模型,并在底部列表中展示,且搜索词高亮显示.下面我们分别来介绍下这些功能的实现. 顶部搜索栏 class SearchBar exte

Android实现高亮搜索功能的示例

目录 首先看效果图: 使用方法: 1.普通场景使用 2.在DataBinding中使用 首先看效果图: 整词高亮: 分词高亮: 下面贴上我封的方法 /** * 关键字高亮显示 * text 原文 * keyWord 需要高亮显示的关键字 * isCut 是否需要做分词高亮展示 * isCut = true 关键字里的每一个字,只要有都会高亮 * isCut = false(默认) 只有整词才会高亮 **/ fun stringToHighLight(text: String, keyWord:

Android实现强制下线功能的示例代码

一.回顾 上次连载写了两个类,一个类ActivityCollector.java用于管理所有的活动:一个类是BaseActivity.java作为所有活动的父类: 还有一个放在layout目录中的登录界面login.xml 二.登录页面的活动 接下来写一个登录页面的活动,继承自BaseActivity.java package com.example.broadcastbestpractice; import android.content.Intent; import android.os.B

yii2组件之下拉框带搜索功能的示例代码(yii-select2)

简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程. 如果你还没有使用过composer,你可就out了,看我的教程分享,composer简直就是必备神奇有木有.都说到这个点上了,我们赶紧使用composer进行安装吧. 不急,先来看看效果图是啥样的,不然都没心情没欲望看下去. 啥玩意,不感兴趣?继续看嘛,看完再操作一边才能觉得好在哪里. 有木有感觉很帅气,当然啦,远远不止,还很上档次用起来效果也是杠杠的有木有. 好了好了,抓紧时间安装,不然聊起来真是没完没

使用ElasticSearch6.0快速实现全文搜索功能的示例代码

本文不涉及ElasticSearch具体原理,只记录如何快速的导入mysql中的数据进行全文检索. 工作中需要实现一个搜索功能,并且导入现有数据库数据,组长推荐用ElasticSearch实现,网上翻一通教程,都是比较古老的文章了,无奈只能自己摸索,参考ES的文档,总算是把服务搭起来了,记录下,希望有同样需求的朋友可以少走弯路,能按照这篇教程快速的搭建一个可用的ElasticSearch服务. ES的搭建 ES搭建有直接下载zip文件,也有docker容器的方式,相对来说,docker更适合我们

Android RecyclerView添加搜索过滤器的示例代码

搜索过滤功能,相信大家都能用到,一般都是针对列表进行过滤的.下面给大家提供一种过滤列表的方法. 老规矩,先上图 RecycleView搜索过滤器-getFilter() Android 提供了Fileterable类,可以通过过滤器(条件)来过滤数据.通常,getFilter()方法必须在提供过滤条件的适配器类中被重写,以通过列表进行搜索.下面是通过getFilter(),来过滤数据. @Override public Filter getFilter() { return new Filter

Django 简单实现分页与搜索功能的示例代码

假设现有需求如下: 需要一个页面分页展示信息,在该页面添加搜索框以提供检索功能. 那么,我们知道,展示信息和检索功能是在同一个页面,也就是共用一个路由. 代码如下: 第一步,写路由:为了清晰,这里只给出主页和展示页面的路由. urls.py: from django.urls import path from . import views from django.conf.urls.static import static from django.conf import settings fro

Android仿淘宝搜索联想功能的示例代码

现在不少应用都提供了搜索功能,有些还提供了搜索联想.对于一个搜索联想功能,最基本的实现流程为:客户端通过监听输入框内容的变化,当输入框发生变化之后就会回调afterTextChanged方法,客户端利用当前输入框内的文字向服务器发起请求,服务器返回与该搜索文字关联的结果给客户端进行展示.服务器那边,一般要做内存缓存池,就是把有可能的结果都放在内存中. 效果图 APP这边也有几个重要的问题需要我们思考 当搜索词为空时,不应该发起网络请求. 在用户连续输入的情况下,可能会发起某些不必要的请求.例如用

Android 百度地图POI搜索功能实例代码

在没介绍正文之前先给大家说下poi是什么意思. 由于工作的关系,经常在文件中会看到POI这三个字母的缩写,但是一直对POI的概念和含义没有很详细的去研究其背后代表的意思.今天下班之前,又看到了POI这三个字母,决定认认真真的搜索一些POI具体的含义. POI是英文的缩写,原来的单词是point of interest, 直译成中文就是兴趣点的意思.兴趣点这个词最早来自于导航地图厂商.地图厂商为了提供尽可能多的位置信息,花费了很大的精力去寻找诸如加油站,餐馆,酒店,景点等目的地,这些目的地其实都可

Android PC投屏功能实现的示例代码

本文介绍了Android PC投屏功能实现的示例代码,分享给大家,具体如下: 代码地址 :https://github.com/deepsadness/MediaProjectionDemo 效果预览 投屏效果预览 简单说明: 使用Android MediaProjection Api来完成视频的截图 通过WebSocket进行链接.将图片传递给网页 想法来源 看到vysor,觉得特别好玩,于是就想着自己能不能试着做一个类似的功能出来.搜索了相关实现.发现网上已经有网友针对vysor做了分析.于

Android 自定义LineLayout实现满屏任意拖动功能的示例代码

1.前言 在开发中,会有需求实现控件在屏幕随意拖动,这就需要自定义View,然后在OnTouchEvent事件中,处理MotionEvent.ACTION_MOVE事件,然后通过坐标点传值给onlayout方法,来实现控件的任意拖动,具体代码如下: import android.content.Context; import android.util.AttributeSet; import android.view.Display; import android.view.MotionEven

Android 获取随机验证码功能示例

验证码功能在各大网站都能用到,下面小编通过实例代码给大家分享Android 获取随机验证码功能,具体代码如下所示: package cn.hk.image; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.IOException; impo