当前位置: 首页 > web >正文

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.xdnf.cn/news/6232.html

相关文章:

  • JAVA异常体系
  • Linux proc文件系统 内存影射
  • YOLO11解决方案之热力图探索
  • 二分查找的边界问题
  • KUKA机器人中断编程3—暂停功能的编程
  • Selenium-Java版(环境安装)
  • fio 命令在 Linux 系统中的应用示例
  • Android锁
  • android studio导入项目
  • json-server的用法-基于 RESTful API 的本地 mock 服务
  • jQuery知识框架
  • Spring Cloud Gateway 聚合 Swagger 文档:一站式API管理解决方案
  • 鸿蒙OSUniApp 实现精美的用户登录和注册页面#三方框架 #Uniapp
  • Vue ElementUI原生upload修改字体大小和区域宽度
  • WeakAuras Lua Script ICC (BarneyICC)
  • 【周输入】510周阅读推荐-2
  • TTS-Web-Vue系列:Vue3实现侧边栏与顶部导航的双向联动
  • 23-单调队列-滑动窗口
  • LeetCode 每日一题 3341. 到达最后一个房间的最少时间 I + II
  • NAT网关(网络地址转换网关)的用途与场景
  • Mac的web服务器
  • [滑动窗口]越短越合法(可转化成越长越合法)
  • 【每天一个知识点】模型轻量化(Model Compression and Acceleration)技术
  • 麒麟环境下Selenium的使用
  • 语音识别-2
  • 【Oracle专栏】清理告警日志、监听日志
  • 【进程控制二】进程替换和bash解释器
  • 【数据库复习】SQL语言
  • Java生成可控的Word表格功能开发
  • 《世界经济浪潮中的AI变革与展望》