Flutter在键盘的上方加一个完成按钮

有些情况下,输入框在输入键盘弹出后, 需要在键盘的上方显示一个toolbar , 然后 toolbar 上面一个完成按钮,点完成按钮把键盘关闭。 

如图: 

直接上代码,这样写的好处是,把 TextField 给封装了, 这样使用起来更方便一些,

更多的属性,自己可以在上面扩展。 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class KeyboardDoneInput extends StatefulWidget {final TextEditingController controller;final ValueChanged<String>? onSubmitted;const KeyboardDoneInput({Key? key,required this.controller,this.onSubmitted,}) : super(key: key);@overrideState<KeyboardDoneInput> createState() => _KeyboardDoneInputState();
}class _KeyboardDoneInputState extends State<KeyboardDoneInput> {late final FocusNode _focusNode = FocusNode();OverlayEntry? _overlayEntry;@overridevoid initState() {super.initState();_focusNode.addListener(_handleFocusChange);}void _handleFocusChange() {if (_focusNode.hasFocus) {_insertOverlay();} else {_removeOverlay();}}void _insertOverlay() {if (_overlayEntry != null) return;final overlay = Overlay.of(context);_overlayEntry = OverlayEntry(builder: (context) => Positioned(left: 0,right: 0,bottom: MediaQuery.of(context).viewInsets.bottom,child: Material(color: Colors.transparent,child: Container(padding: const EdgeInsets.symmetric(horizontal: 20),color: Colors.grey[100],child: Row(children: [const Spacer(),CupertinoButton(padding: EdgeInsets.zero,child: const Text("完成",style: TextStyle(fontSize: 16, color: Colors.black),),onPressed: () {_focusNode.unfocus();widget.onSubmitted?.call(widget.controller.text);},),],),),),),);overlay.insert(_overlayEntry!);}void _removeOverlay() {_overlayEntry?.remove();_overlayEntry = null;}@overridevoid dispose() {_focusNode.dispose();_removeOverlay();super.dispose();}@overrideWidget build(BuildContext context) {return TextField(controller: widget.controller,focusNode: _focusNode,keyboardType: TextInputType.number,textAlign: TextAlign.center,inputFormatters: [FilteringTextInputFormatter.digitsOnly],decoration: const InputDecoration(border: OutlineInputBorder(),contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),),onSubmitted: widget.onSubmitted,);}
}

调用如下, 

KeyboardDoneInput(controller: _controller, onSubmitted: (value) {},
)

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

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

相关文章

Flink SQL 将kafka topic的数据写到另外一个topic里面

-- 创建源表&#xff0c;使用 RAW 格式接收原始 JSON 数据 CREATE TABLE source_kafka ( id STRING, data STRING ) WITH ( connector kafka, topic source_kafka-topic, properties.bootstrap.servers master01:9092, properties.group.id flink-kafka-group, scan.startu…

618开售仅1小时,李佳琦直播间加购同增超10%

5月13日晚8点&#xff0c;天猫618大促正式拉开帷幕&#xff0c;李佳琦直播间首日“爆款美妆节”公布首轮战报&#xff1a;首小时加购GMV同比增长超10%&#xff0c;可复美、珀莱雅等品牌超60万件国货爆品秒售罄。 据统计&#xff0c;今年李佳琦直播间618首日预售共上架近500件爆…

【轻松学 C:编程小白的大冒险】— 16 函数的定义与调用

在编程的艺术世界里&#xff0c;代码和灵感需要寻找到最佳的交融点&#xff0c;才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里&#xff0c;我们将共同追寻这种完美结合&#xff0c;为未来的世界留下属于我们的独特印记。 【轻松学 C&#xff1a;编程小白的大冒险…

多模态大语言模型arxiv论文略读(七十四)

UniQA: Unified Vision-Language Pre-training for Image Quality and Aesthetic Assessment ➡️ 论文标题&#xff1a;UniQA: Unified Vision-Language Pre-training for Image Quality and Aesthetic Assessment ➡️ 论文作者&#xff1a;Hantao Zhou, Longxiang Tang, Ru…

Flutter - UIKit开发相关指南 - 线程和异步

线程和异步 编写异步代码 Dart采用单线程执行模型,支持Isolates(在另一个线程上运行Dart代码)、事件循环和异步编程。除非生成一个Isolates&#xff0c;否则Dart代码将在主UI线程中运行&#xff0c;并由事件循环驱动。Flutter的事件循环相当于iOS的主线程上的RunLoop。 Dart…

【愚公系列】《Manus极简入门》038-数字孪生设计师:“虚实映射师”

&#x1f31f;【技术大咖愚公搬代码&#xff1a;全栈专家的成长之路&#xff0c;你关注的宝藏博主在这里&#xff01;】&#x1f31f; &#x1f4e3;开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主&#xff01; &#x1f…

西门子WinCC Unified PC的GraphQL使用手册

TIA V20版本&#xff1a;添加用户 添加角色&#xff0c;并充分授权&#xff0c;尤其是GraphQL的读写权限。 通过SIMATIC Runtime Manager启动wincc unifi工程。 打开浏览器&#xff0c;访问本地的https://localhost/graphql/&#xff0c;运行正常如图&#xff1a; 连接外…

开源长期主义:浅谈DeepSeek技术主张与早期论文

开源、长期主义与DeepSeek的技术愿景 ©作者|格林 来源|神州问学 导入&#xff1a;Deepseek在早期就开源了许多优秀的指令模型与对话模型&#xff0c;并发布了多篇论文。以下&#xff0c;我们将基于Deepseek在早期发布的6篇论文&#xff0c;来梳理Deepseek公司的技术路径与…

TTS-Web-Vue系列:Vue3实现内嵌iframe文档显示功能

&#x1f5bc;️ 本文是TTS-Web-Vue系列的新篇章&#xff0c;重点介绍如何在Vue3项目中优雅地实现内嵌iframe功能&#xff0c;用于加载外部文档内容。通过Vue3的响应式系统和组件化设计&#xff0c;我们实现了一个功能完善、用户体验友好的文档嵌入方案&#xff0c;包括加载状态…

Elasticsearch索引设计与调优

一、分片策略设计 1.‌分片容量规划 单分片容量建议30GB(日志场景可放宽至100GB),避免超大分片引发查询延迟。分片总数计算公式:总数据量 / 30GB 1.2(20%余量应对未来增长)。主分片数创建后不可修改,副本分片数支持动态调整。2.‌分片分布优化 PUT logs-2025 { &qu…

Spring AI 集成 Mistral AI:构建高效多语言对话助手的实战指南

Spring AI 集成 Mistral AI&#xff1a;构建高效多语言对话助手的实战指南 前言 在人工智能应用开发领域&#xff0c;选择合适的大语言模型&#xff08;LLM&#xff09;与开发框架至关重要。Mistral AI 凭借其高效的多语言模型&#xff08;如 Mistral-7B、Mixtral-8x7B 等&am…

从新手到高手:全面解析 AI 时代的「魔法咒语」——Prompt

引言&#xff1a;AI 时代的「语言炼金术」 在人工智能技术突飞猛进的今天&#xff0c;我们正在经历一场堪比工业革命的生产力变革。从聊天机器人到图像生成&#xff0c;从数据分析到自动化写作&#xff0c;AI 模型正在重塑人类与信息交互的方式。而在这一切背后&#xff0c;隐…

MySQL 8.0安装(压缩包方式)

MySQL 8.0安装(压缩包方式) 下载安装包并解压 下载 https://dev.mysql.com/downloads/mysql/可关注“后端码匠”回复“MySQL8”关键字获取 解压&#xff08;我解压到D:\dev\mysql-8.4.5-winx64目录下&#xff09; 创建mysql服务 注意&#xff0c;这步之前一定要保证自己电…

免费Ollama大模型集成系统——Golang

Ollama Free V2 Web 功能实现&#xff1a;界面交互与后端逻辑 一、Web 界面概述 Ollama Free V2 的 Web 界面提供了丰富的交互功能&#xff0c;包括模型选择、图片上传、历史记录查看等。界面使用 Bootstrap 进行布局&#xff0c;结合 JavaScript 实现动态交互。 二、前端界…

【AI】人工智能数据标注细分和商业机会

一、数据标注的常见方法 数据标注是为人工智能模型训练提供高质量标签的过程&#xff0c;根据数据类型&#xff08;图像、文本、音频、视频等&#xff09;的不同&#xff0c;标注方法也有所差异&#xff1a; 1. 图像标注 分类标注&#xff1a;为图像分配类别标签&#xff08…

lanqiaoOJ 652:一步之遥 ← 扩展欧几里得定理

【题目来源】 https://www.lanqiao.cn/problems/652/learning/ 【题目背景】 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 【题目描述】 从昏迷中醒来&#xff0c;小明发现自己被关在X星球的废矿车里。矿车停在平直的废弃…

HTTP / HTTPS 协议

目录 一、前言&#xff1a; 二、Fiddler 抓包工具&#xff1a; 三、http 协议&#xff1a; 1、http 请求&#xff1a; 1.&#xff08;1&#xff09;请求行&#xff1a; 1、(2) 请求头&#xff1a; 1、(3) 请求正文: 2、http 响应&#xff1a; 2、(1) 状态码&#x…

使用泛型加载保存数据

文章速览 泛型泛型概述定义优点 实例加载数据保存数据 一个赞&#xff0c;专属于你的足迹&#xff01; 泛型 泛型概述 泛型&#xff08;Generics&#xff09;是 C# 中一种重要的编程特性&#xff0c;它允许程序员编写灵活且类型安全的代码。通过使用泛型&#xff0c;可以创建…

Redis内存淘汰策略和过期键删除策略有哪些?

Redis 提供 8 种内存淘汰策略&#xff0c;以下是详细解析及场景建议&#xff1a; 一、核心策略解析 noeviction (默认策略) 机制&#xff1a;内存满时拒绝新写入操作&#xff0c;返回错误优势&#xff1a;绝对数据安全场景&#xff1a;金融交易系统、医疗数据存储 allkeys-lr…

【C/C++】自定义类型:结构体

文章目录 前言自定义类型&#xff1a;结构体1.结构体类型的声明1.1 结构体回顾1.1.1 结构的声明 1.1.2 结构体变量的创建和初始化1.2 结构的特殊声明1.3 结构的自引用 2.结构体内存对齐2.1 对⻬规则2.2 为什么存在内存对齐&#xff1f;2.3 修改默认对⻬数 3. 结构体传参4.结构体…