flutter:实现一个简单的appBar上的搜索框、一个简单的搜索历史

news2024/11/15 6:56:52

搜索框

效果图
在这里插入图片描述
代码

import 'package:flutter/material.dart';

class NovelSearch extends StatefulWidget {
  
  State<StatefulWidget> createState() => _NovelSearchState();
}

class _NovelSearchState extends State<NovelSearch> {
  String searchVal = '';
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //清除title左右的padding,默认会有一定的距离
        titleSpacing: 0,
        elevation: 0,
        title: SearchAppBar(
          hintLabel: "搜索书名",
          onSubmitted: (value) {
            setState(() {
              this.searchVal = value;
            });
          },
        ),
      ),
      body: Text("搜索值是:${this.searchVal}"),
    );
  }
}

class SearchAppBar extends StatefulWidget {
  SearchAppBar({Key? key, required this.hintLabel, required this.onSubmitted})
      : super(key: key);
  final String hintLabel;
  // 回调函数
  final Function(String) onSubmitted;

  
  State<StatefulWidget> createState() => _SearchAppBarState();
}

class _SearchAppBarState extends State<SearchAppBar> {
  // 焦点对象
  FocusNode _focusNode = FocusNode();
  // 文本的值
  String searchVal = '';
  //用于清空输入框
  TextEditingController _controller = TextEditingController();

  void initState() {
    super.initState();
    //  获取焦点
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _focusNode.requestFocus();
    });
  }

  
  Widget build(BuildContext context) {
    // 获取屏幕尺寸
    MediaQueryData queryData = MediaQuery.of(context);
    return Container(
      // 宽度为屏幕的0.8
      width: queryData.size.width * 0.8,
      // appBar默认高度是56,这里搜索框设置为40
      height: 40,
      // 设置padding
      padding: EdgeInsets.only(left: 20),
      // 设置子级位置
      alignment: Alignment.centerLeft,
      // 设置修饰
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10), color: Colors.white),
      child: TextField(
        controller: _controller,
        // 自动获取焦点
        focusNode: _focusNode,
        autofocus: true,
        decoration: InputDecoration(
            hintText: widget.hintLabel,
            hintStyle: TextStyle(color: Colors.grey),
            // 取消掉文本框下面的边框
            border: InputBorder.none,
            icon: Padding(
                padding: const EdgeInsets.only(left: 0, top: 0),
                child: Icon(
                  Icons.search,
                  size: 18,
                  color: Theme.of(context).primaryColor,
                )),
            //  关闭按钮,有值时才显示
            suffixIcon: this.searchVal.isNotEmpty
                ? IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {
                      //   清空内容
                      setState(() {
                        this.searchVal = '';
                        _controller.clear();
                      });
                    },
                  )
                : null),
        onChanged: (value) {
          setState(() {
            this.searchVal = value;
          });
        },
        onSubmitted: (value) {
          widget.onSubmitted(value);
        },
      ),
    );
  }
}

搜索历史

效果
在这里插入图片描述
代码

import 'package:flutter/material.dart';

/**
 * 搜索历史
 */

class SearchHistory extends StatefulWidget {
  List<String> list;
  final Function() clearHistory;
  SearchHistory({Key? key, required this.list, required this.clearHistory})
      : super(key: key) {
    list.removeWhere((element) => element.isEmpty);
  }
  
  State<StatefulWidget> createState() => _SearchHistoryState();
}

class _SearchHistoryState extends State<SearchHistory> {
  
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 30,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              //添加一个padding
              Padding(
                padding: EdgeInsets.only(left: 10),
                child: Text(
                  '搜索历史',
                  style: TextStyle(color: Colors.grey, fontSize: 12),
                ),
              ),
              // 构建一个文本按钮
              GestureDetector(
                onTap: () {
                  widget.clearHistory();
                },
                child: widget.list.isNotEmpty
                    ? Padding(
                        padding: EdgeInsets.only(right: 10),
                        child: Text(
                          '清空历史',
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.grey,
                          ),
                        ),
                      )
                    : null,
              )
            ],
          ),
        ),
        Expanded(
          child: SingleChildScrollView(
            padding: EdgeInsets.all(2),
            child: Wrap(
              children: List.generate(
                  widget.list.length, (index) => _listItem(widget.list[index])),
            ),
          ),
        )
      ],
    );
  }

  //  构建子组件
  _listItem(String title) {
    // FittedBox用于调整其子部件的大小以适应可用空间
    return FittedBox(
      fit: BoxFit.scaleDown,
      alignment: Alignment.centerLeft,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
        margin: EdgeInsets.all(5),
        decoration: BoxDecoration(
            color: Colors.grey.withOpacity(0.5),
            borderRadius: BorderRadius.circular(10)),
        child: Text(
          title,
          style: TextStyle(fontSize: 12),
        ),
      ),
    );
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/714172.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DSP的CLA编程及注意事项之一

CLA简介 CLA(Control Law Accelerator),即控制律加速器&#xff0c;该 CLA 是完全可编程的独立 32 位浮点 CPU&#xff0c;专为优化数学密集型计算而设计&#xff0c;可显著提升控制算法的性能。与 执行指令和处理中断的标准传统处理器不同&#xff0c;CLA 实际上是任务驱动状…

Axure教程—上传文件

本文介绍用Axure制作文件上传效果 预览 预览地址&#xff1a;https://6q4of2.axshare.com 功能 1、点击”文件上传“按钮&#xff0c;显示上传的文件 2、点击”删除“图片&#xff0c;显示提示”是否要删除“&#xff0c;点击”是“&#xff0c;删除数据&#xff0c;点击”否…

开放式蓝牙耳机好不好,列举出几款值得入手的开放式蓝牙耳机

开放式耳机不仅能够提升幸福感还能听到周围环境声&#xff0c;大大提高安全性&#xff0c;不入耳不伤耳设计&#xff0c;既稳固又舒适&#xff0c;佩戴上耳无压力&#xff0c;还具有良好的音质和舒适的佩戴体验。但市面开放式耳机质量也参差不齐&#xff0c;有些使用感不佳&…

高压放大器使用说明书

高压放大器是一种电子设备&#xff0c;可以将输入信号的电能转换成输出信号的电能&#xff0c;从而实现信号放大的功能。它广泛应用于各种领域&#xff0c;例如通信、雷达、医疗等等。下面是一份高压放大器使用说明书&#xff0c;帮助用户更好地了解和使用该设备。 一、高压放大…

追思郭文彬:不管封我当什么长,下辈子我还当厨师!

6月28日&#xff0c;在北京联合大学旅游学院餐饮管理系的走廊&#xff0c;大大的长条桌上摆放着各类像生面点、面塑、包子等美食作品——牡丹、玉兰花、灯笼、小金鱼、花生、龙眼、山竹、翡翠白菜……作品精巧细致&#xff0c;形神兼备&#xff0c;宛若工艺品。 这些作品都出自…

MyBatis-Plus 实现PostgreSQL数据库jsonb类型的保存与查询

文章目录 在 handle 包下新建Jsonb处理类方式一方式二 PostgreSQL jsonb类型保存新建数据库表含有jsonb类型创建实体类Control创建保存数据库方法发起请求 PostgreSQL jsonb类型查询Control创建查询数据库方法发起请求 在 handle 包下新建Jsonb处理类 方式一 import com.alib…

(css)el-image图片完整显示,不拉伸收缩

(css)el-image图片完整显示&#xff0c;不拉伸收缩 <el-imagefit"contain" //重要设置src"../../../../1.png"altclass"chenguo_img_img" />

【RocketMQ】CentOS8安装RocketMQ

RocketMQ的安装 检查jdk环境 RocketMQ是基于java开发的&#xff0c;安装之前请先查看是否有jdk环境 java -version如果没有请去官网&#xff08;https://www.oracle.com/java/technologies/downloads/#java8&#xff09;下载 下载RocketMQ安装包 前往官网&#xff08;http…

信道编码:Matlab RS编码、译码使用方法

Matlab RS编码、译码使用方法 1. 相关函数 在MATLAB中进行RS编码的过程可以使用rsenc()函数或者comm.RSEncoder()函数。 1.1 rsenc()函数使用方法 在MATLAB中帮助中可以看到有三种使用形式&#xff0c;分别为 code rsenc(msg,n,k) code rsenc(msg,n,k,genpoly) code rs…

Excel拼接sql语句,批量导入数据

如下示例图&#xff1a; sql语句&#xff1a;"insert into table (code, path, method) values ("&A2&"’,"&B2&","&C2&"’’);" "("&A2&","&B2&","&C2…

数据分析Lambda架构详解

大家好&#xff0c;今天我们来介绍一个用于亿级实时数据分析架构Lambda架构。 Lambda架构 Lambda架构&#xff08;Lambda Architecture&#xff09;是由Twitter工程师南森马茨&#xff08;Nathan Marz&#xff09;提出的大数据处理架构。这一架构的提出基于马茨在BackType和Tw…

形式化验证,A Theoretical Framework for SymbolicQuick Error Detection(四)

一、Article:文献出处&#xff08;方便再次搜索&#xff09; &#xff08;1&#xff09;作者 Florian Lonsing, Subhasish Mitra, and Clark Barrett&#xff08;Stanford University&#xff0c;斯坦福大学&#xff09; &#xff08;2&#xff09;文献题目 A Theoretical F…

目标检测之遮挡物体检测

一、遮挡的类别 类内遮挡&#xff0c;目标被同一类别的目标遮挡类间遮挡&#xff0c;目标被其它类别的目标遮挡 二、解决方法 数据标注 精调遮挡目标的GT边界框 数据增强 cutout&#xff1a;在训练时&#xff0c;随机mask目标&#xff0c;提升模型对遮挡的应对能力mosaic…

如何排查Trino常见报错问题

一、背景 必须前置知识&#xff1a;《Trino权威指南》第12章及周边涉及知识&#xff0c;基于392版本的使用层面入门书&#xff0c;引擎创始人亲自编写&#xff1a; https://www.wisdominterface.com/wp-content/uploads/2021/07/Trino-Oreilly-Guide.pdfhttps://www.wisdomin…

【Linux】基础IO——文件描述符/缓冲区/重定向/文件系统

文章目录 一、文件描述符二、缓冲区三、重定向的原理四、文件系统 (Linux Ext2)1 认识磁盘的结构CHSLBABlock 2 认识文件系统2.1 分区2.2 文件系统的结构2.3 剖析inode2.4 文件的操作 3 软硬链接3.1 软链接3.2 硬链接 &#x1f4dd; 个人主页 &#xff1a;超人不会飞)&#x1f…

低代码平台的价格范围及购买成本分析

Zoho Creator是一款强大而灵活的低代码应用程序开发平台&#xff0c;可帮助企业快速、高效地创建各种应用程序。但是&#xff0c;很多人可能会担心它的价格问题。在这篇文章中&#xff0c;我们将深入探讨Zoho Creator的定价策略和计划&#xff0c;以帮助您更好地理解其价格结构…

如何保证消息队列的高可用?

RabbitMQ的高可用性 RabbitMQ 是比较有代表性的&#xff0c;因为是基于主从&#xff08;非分布式&#xff09;做高可用性的&#xff0c;我们就以 RabbitMQ 为例子讲解第一种 MQ 的高可用性怎么实现。 RabbitMQ 有三种模式&#xff1a;单机模式、普通集群模式、镜像集群模式。…

【裸机开发】I2C 通信接口(一)—— I2C 通信时序协议及通信流程

目录 一、I2C 简介 二、I2C 的整体通信流程 三、主要通信时序和协议 3.1 开始 / 停止条件 3.2 地址传送 3.3 数据传输 3.4 应答条件 3.5 重复开始条件 四、总线仲裁机制&#xff08;SDA&#xff09; 1、什么是总线仲裁 2、总线仲裁的过程 五、时钟同步&#xff08;…

QT学习笔记:TCP客户端的实现

QT一般用来做客户端&#xff0c;我这里就简单讲一下怎么开发基于QT的TCP客户端。 1、用QtCreator创建项目 2、界面 3、.pro文件添加network QT core gui network 4、mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include &l…

关于Unity动画卡在第一帧的处理方法

今天在制作人物的死亡动画时出现了题目所说的问题&#xff0c;以下是动画的状态机 因为任何状态都可能死亡&#xff0c;所以是从anyState进入的死亡动画 进入条件为isDead是true&#xff0c;当角色死亡时这个条件就会设置成true 结果出现了卡在这个动画的问题 经过检查发现&a…