Flutter TextField自定义键盘

最新推荐文章于 2024-06-22 23:10:35 发布
最新推荐文章于 2024-06-22 23:10:35 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/devday/article/details/108823993
版权

TextField获取到焦点后弹出的是系统的键盘，有的功能需要自定义键盘，那如何办呢？

我觉得需要两步，首先要禁止弹窗系统键盘，然后再显示自定义键盘
禁用很简单，设置两个属性即可

readOnly: true,
showCursor: true,

再在合适的地方显示你的自定义键盘。

onTap: () {
    //这儿触发自定义键盘显示
},

简单吗？

大招至胜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Flutter开发中常用的快捷键，并修改
u013297881的专栏
10-25 934
https://www.jianshu.com/p/b9efacbf6c34 下面找到快捷键 并且可自行修改 但是添加padding等属性 没找到，但是 在Androidstudio 右边可以找到 在flutter Outline 中 圆圈的几个 可以自行点击试试 ...
Flutter —快速开发的IDE快捷方式
老孟Flutter
07-03 2155
老孟导读：这是老孟翻译的精品文章，文章所有权归原作者所有。 欢迎加入老孟Flutter交流群，每周翻译2-3篇付费文章，精彩不容错过。 原文地址：https://medium.com/flutter-community/flutter-ide-shortcuts-for-faster-development-2ef45c51085b 如果您是一个 Flutter 初学者，那么您一定厌恶嵌套结构，在代码中添加或删除一个小部件，或者找到一个小部件在何处结束、何处开始是多么困难。 然后，您需要花费一整天的..
Flutter 项目实战 编辑框(TextField) 自定义 七
最新发布
2401_85493350的博客
06-22 839
小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。[外链图片转存中…(img-PloXi037-1719069023336)]一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人。
Flutter实战-自定义键盘(一)
ITDogFire
07-18 1890
用了两年的flutter，有了一些心得，从今天开始陆续更新一些案例，不虚头巴脑，只求实战有用，以供学习或使用flutter的小伙伴参考，学习尚浅，如有不正确的地方还望各路大神指正，以免误人子弟，在此拜谢~（原创不易，转发请标注来源和作者）注意：无特殊说明，flutter版本为3.0+此文大部分代码内容来自 https://github.com/Im-Kevin/cool_ui，感谢大神指路，喜欢的可以去看源码，当然也有区别于原作者的实现，敬请关注。   
轻松掌握Flutter中的键盘操作技巧
m0_69656288的博客
04-26 2252
最后，让我们来看看如何自定义键盘。如果你希望在某些情况下使用不同于系统键盘的键盘，那么可以使用GestureDetector和Overlay来实现。bottom: 0,left: 0,right: 0,),),),],),),),// 显示自定义键盘},),),复制代码在上面的示例中，我们创建了一个OverlayEntry并将其放置在GestureDetector中。当你点击文本框时，自定义键盘会出现在底部。你可以根据自己的需要修改键盘的布局和样式。
Flutter——最详细(TextField)使用教程
人生在世
05-04 7181
文本输入框，拥有复杂的属性。可指定控制器、文字样式、装饰线、行数限制、游标样式等。监听输入框变动事件。
Flutter创建自定义的软键盘
jjf19891208的专栏
04-29 716
Flutter - Create Custom Keyboard Examples
Flutter 拦截系统键盘，显示自定义键盘
上辈子作恶多端，这辈子写前端。
03-29 715
参考链接: https://juejin.cn/post/7166046328609308685。
flutter TextField换行自适应的实现
08-25
在Flutter开发中，TextField是用于用户输入文本的基本组件，它提供了丰富的自定义功能。本文将详细探讨如何在Flutter中实现TextField的换行自适应效果，包括自动调整高度以适应输入内容的增长，同时保持预设的内外...
Flutter自定义TabBar的Indicator.zip
03-02
在本文中，我们将深入探讨如何在Flutter中自定义TabBar的Indicator，以便实现类似秒杀Tab的视觉效果。Flutter是一个由Google开发的开源UI工具包，用于构建高性能、高保真、多平台的移动应用程序。TabBar是Flutter中...
Flutter —— 自定义 Widget
01-07
import 'package:flutter/material.dart' class Example extends StatelessWidget { @override Widget build(BuildContext context) { return Text(无状态小部件) } } 2. 有状态 StatefulWidg
Flutter自定义控件之图片裁剪框
01-10
在本文中，我们将深入探讨如何在Flutter框架中创建一个自定义控件，专注于实现图片裁剪功能。Flutter作为Google推出的跨平台开发工具，以其丰富的Widget库和高效的开发体验深受开发者喜爱。然而，尽管Flutter提供了...
用Flutter开发自定义Plugin的方法示例
08-25
本文将详细介绍如何使用Flutter开发自定义插件，包括创建插件项目、编写插件代码、使用插件等步骤。 一、创建Flutter插件项目 在Android Studio中创建一个新的Flutter插件项目，选择"Plugin"项目类型，并命名为...
Flutter实战-自定义键盘(二)
ITDogFire
07-21 1754
用了两年的flutter，有了一些心得，从今天开始陆续更新一些案例，不虚头巴脑，只求实战有用，以供学习或使用flutter的小伙伴参考，学习尚浅，如有不正确的地方还望各路大神指正，以免误人子弟，在此拜谢~（原创不易，转发请标注来源和作者）注意：无特殊说明，flutter版本为3.0+此文大部分代码内容来自 https://github.com/Im-Kevin/cool_ui，感谢大神指路，喜欢的可以去看源码，当然也有区别于原作者的实现，敬请关注。  &
Flutter 自定义键盘解决方案
weixin_34146986的博客
04-10 5540
Flutter 自定义键盘解决方案 前言: 目前Flutter官方是没有自定义键盘的解决方案 但是我们有时候需要用到它,比如金额键盘,安全密码键盘,各种自定义快速输入键盘 于是我便写了一个自定义键盘的插件,由于是通过拦截PlatformChannel实现的,所以可以无缝对接TextFiled等Flutter自带的输入框 GitHub链接 效果 使用方法: 安装依赖 dependencies: ...
Flutter TextField跟随键盘弹出和收回（类似于今日头条的评论）
WangQingLei0307的博客
07-07 5101
在开发过程中，我们会遇到输入框跟随键盘上下移动的效果（例如今日头条，当我们点击评论框时候，评论框会自动跟随键盘上移或收回），在原生开发这个效果很简单，那么Flutter如何实现呢？向上一下效果图 编辑前： 编辑后： 那么这项过如何实现呢？废话不多说直接上代码 Container( child: AnimatedPadding( padding: MediaQuery.of(context).viewInsets, //边距（必要） .
Flutter 移动光标 关闭弹出的键盘
emdd2016的博客
06-25 4147
移动光标 要移动光标先要将目标view关联对应的FocusNode， 然后通过FocusScope来request对应的FocusNode即可。 关闭弹出的键盘 - 如果关联了对应的FocusNode， 直接调用focusNode.unfocus()即可 - 如果没有关联， 直接用 FocusScope.of(context).requestFocus(FocusNode()); 完成案例如下...
Flutter - 5 : 键盘遮挡输入框问题，以及阻止系统键盘弹出
热门推荐
Alpha的粪坑
12-19 1万+
Flutter - 5 : 键盘遮挡输入框问题，以及阻止系统键盘弹出 Flutter中的输入框控件TextField竟然在被键盘遮挡的时候没有上移的行为，真是坑爹。 中间参考过某位大神的解决办法，然而没成功，可能是我看的不够仔细，用的方法不对。 链接如下：点击跳转某位大神的解决办法 没办法，只能自己解决，暴力的解决。效果如下图： 解决办法： 如果系统没给向上滑动，那就自己控制它向上滑动，Singl...
Flutter TextField键盘溢出处理
的博客
11-07 1523
方法1:使用禁止滚动resizeToAvoidBottomInset 方法2:SingleChildScrollView
flutter 自定义键盘
05-26
在Flutter中，可以使用自定义Widget来实现自定义键盘。以下是实现自定义键盘的一般步骤： 1. 创建一个StatefulWidget，该Widget将显示自定义键盘。 2. 实现一个键盘布局。可以使用Flutter提供的各种Widget（如Container、Row、Column等）来创建键盘布局，并使用GestureDetector Widget来处理键盘按钮的点击事件。 3. 在需要使用自定义键盘的地方，使用Flutter的FocusNode来控制输入框的焦点，并将自定义键盘与输入框关联起来。 下面是一个简单的实现自定义键盘的示例代码： ```dart import 'package:flutter/material.dart'; class CustomKeyboard extends StatefulWidget { @override _CustomKeyboardState createState() => _CustomKeyboardState(); } class _CustomKeyboardState extends State<CustomKeyboard> { TextEditingController _textEditingController = TextEditingController(); @override Widget build(BuildContext context) { return Container( child: Column( children: [ TextField( controller: _textEditingController, focusNode: FocusNode(), decoration: InputDecoration( hintText: 'Input something', ), ), Row( children: [ CustomButton('1'), CustomButton('2'), CustomButton('3'), ], ), Row( children: [ CustomButton('4'), CustomButton('5'), CustomButton('6'), ], ), Row( children: [ CustomButton('7'), CustomButton('8'), CustomButton('9'), ], ), Row( children: [ CustomButton('0'), CustomButton('backspace'), ], ), ], ), ); } } class CustomButton extends StatelessWidget { final String text; CustomButton(this.text); @override Widget build(BuildContext context) { return GestureDetector( onTap: () { if (text == 'backspace') { String currentText = CustomKeyboard.of(context) .controller .text; if (currentText.isNotEmpty) { CustomKeyboard.of(context) .controller .text = currentText.substring(0, currentText.length - 1); } } else { CustomKeyboard.of(context) .controller .text += text; } }, child: Container( width: 100.0, height: 80.0, decoration: BoxDecoration( border: Border.all( color: Colors.grey, ), ), child: Center( child: Text(text), ), ), ); } } class CustomKeyboardController { final TextEditingController controller; CustomKeyboardController(this.controller); void clear() { controller.clear(); } void close() { FocusScope.of(controller.context).requestFocus(FocusNode()); } } class CustomKeyboardScope extends InheritedWidget { final CustomKeyboardController controller; CustomKeyboardScope({ Key key, @required Widget child, }) : assert(child != null), controller = CustomKeyboardController(TextEditingController()), super(key: key, child: child); static CustomKeyboardController of(BuildContext context) { return (context.dependOnInheritedWidgetOfExactType<CustomKeyboardScope>()) .controller; } @override bool updateShouldNotify(CustomKeyboardScope oldWidget) { return controller != oldWidget.controller; } } ``` 在上面的示例代码中，`CustomKeyboard` Widget是自定义键盘的主Widget，它包含了一个`TextField`和一些自定义的按钮。 `CustomButton` Widget是自定义键盘中的按键，它使用`GestureDetector`来处理按钮点击事件。 `CustomKeyboardController`是自定义键盘的控制器，用于控制输入框的文本内容。 最后，使用`CustomKeyboardScope` Widget来将`CustomKeyboardController`注入到自定义键盘中。 在需要使用自定义键盘的地方，可以使用以下代码来显示自定义键盘： ```dart CustomKeyboardScope( child: CustomKeyboard(), ); ``` 同时，需要将`CustomKeyboardController`与输入框关联起来，可以使用以下代码： ```dart TextField( controller: CustomKeyboardScope.of(context).controller.textEditingController, focusNode: FocusNode(), ); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值