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

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) {},
)

相关文章:

  • 精益数据分析(57/126):创业移情阶段的核心要点与实践方法
  • mac latex vscode 配置
  • 40:相机与镜头选型
  • VUE中 为什么是 this.$store.state.user.name,而不是 this.$store.user.state.name?
  • 16S18S_OTU分析(3)
  • 容器编排的革命:Kubernetes如何引领IT的云原生时代
  • 2011-2019年各省总抚养比数据
  • 20250507训练赛补题
  • Doris与ClickHouse深度比较
  • vue 去掉右边table的下拉条与下面的白色边框并补充满
  • 数据库基础复习笔记
  • 如何实现一个运动会计分系统?(C语言版)
  • 首个专业AI设计Agent发布-Lovart
  • 鸿蒙OSUniApp制作一个小巧的图片浏览器#三方框架 #Uniapp
  • 深入浅出入侵检测系统(IDS)的工作原理与应用场景
  • 第二章:CSS秘典 · 色彩与布局的力量
  • 如何开发一款 Chrome 浏览器插件
  • 通过泛域名解析把二级域名批量绑定到wordpress的指定页面
  • Java 大视界——Java 大数据在智慧交通智能停车诱导系统中的数据融合与实时更新
  • 分布式1(cap base理论 锁 事务 幂等性 rpc)
  • 汤加附近海域发生6.4级地震
  • 受贿3501万余元,中石油原董事长王宜林一审被判13年
  • 反制美国钢铝关税!印度拟对美国部分商品征收关税
  • 美国拟向阿联酋和沙特AI公司出口数十万枚芯片
  • 福建宁德市长张永宁拟任设区市党委正职,曾获评全国优秀县委书记
  • 俄乌释放停火和谈信号,克宫:将组建“相应级别”谈判代表团