Flutter TextField跟随键盘弹出和收回（类似于今日头条的评论）

最新推荐文章于 2024-02-17 15:21:36 发布
最新推荐文章于 2024-02-17 15:21:36 发布
阅读量4.9k 收藏 13
点赞数 2
分类专栏： Flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangQingLei0307/article/details/118545026
版权

在开发过程中，我们会遇到输入框跟随键盘上下移动的效果（例如今日头条，当我们点击评论框时候，评论框会自动跟随键盘上移或收回），在原生开发这个效果很简单，那么Flutter如何实现呢？向上一下效果图

编辑前：

 编辑后：

那么这项过如何实现呢？废话不多说直接上代码

Container(
            child: AnimatedPadding(//可以添加一个动画效果
              padding: MediaQuery.of(context).viewInsets, //边距（必要）
              duration: const Duration(milliseconds: 100
了解本专栏 订阅专栏 解锁全文 超级会员免费看
王 哪跑！！！
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
flutter TextField换行自适应的实现
08-25
主要介绍了flutter TextField换行自适应的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Flutter 输入框(TextField)被键盘遮挡两种解决方案
jia635的专栏
06-28 1万+
方案一: 如果没有ScrollView或者ListView等可滚动空间包裹,则可以通过padding设置实现键盘不被遮挡问题 Padding( padding: EdgeInsets.only( bottom: MediaQuery.of(context).viewInsets.bottom ), child: TextField( ) ) MediaQuery.of(context).viewInsets.bottom 为键盘弹出时键盘高度,如果上面代码段被可滚动w...
Flutter 点击空白处取消TextField焦点并收起键盘
最新发布
weixin_41469516的博客
02-17 425
原文： 笔记-Flutter 之点击空白处取消TextField焦点 GestureDetector( behavior: HitTestBehavior.translucent, onTap: () { // 触摸收起键盘 FocusScope.of(context).requestFocus(FocusNode()); }, ...
flutter 让TextFeild可以根据输入法上移
龚礼鹏的博客
12-26 2838
1.需要保证TextFeild可以滑动，不然滑动不了 2.需要获取输入法高度，然后包裹TextFeild的布局高度需要减去输入法高度 Scaffold( body: Stack( children: <Widget>[ Column( children: <Widget>[ ...
flutter弹起键盘页面布局超限问题
01-20
BOTTOM OVERFLOWED BY 17 PIXELS 这是由于页面高度写死导致的， 1.scaffold 根布局添加 resizeToAvoidBottomPadding:false 是否自动调整body属性控件的大小，以避免脚手架底部被覆盖。例如，如果在脚手架上方显示屏幕键盘，则可调整body属性控件的大小以避免被键盘覆盖。如果你不需要此功能，可以将resizeToAvoidBottomPadding属性设置为false @override Widget build(BuildContext context) { return Scaffold( r
Flutter高阶技术：如何实现自定义弹出菜单框
06-03
Flutter高阶技术：如何实现自定义弹出菜单框
Flutter 制作输入框和键盘的弹窗
weixin_44911775的博客
05-31 1271
一个问题：怎么让输入框贴着键盘： 可用如下方法解决 Padding( padding: EdgeInsets.only( bottom: MediaQuery.of(context).viewInsets.bottom ), child: TextField( ) ) 但是想在row里面嵌套输入框 那就在textFidle外面套个Expanded 一个问题：弹窗没有状态，怎么setState：StatefulBuilder 我自己的代码 return Container(
Flutter键盘监听弹出收回解决顶起底部按钮且不遮挡输入框问题
weixin_37496178的博客
08-24 1123
解决输入框随软键盘高度自动调整且不顶起固定于底部的按钮问题。
Flutter弹起键盘页面布局超限问题以及布局上移问题
believeinbelieve的博客
03-01 3868
Flutter 键盘弹出布局的问题
Flutter 底部跟随键盘并且页面跟随键盘
mylisty的博客
09-26 2073
1.应用的控件 Scaffold 设置 resizeToAvoidBottomInset: true, // 防止底部被键盘遮挡 stack 设置 children 1 为ListView 内部有TextField可跟随键盘 //正文 children2 为 Align 设置属性 alignment: Alignment.bottomCenter, / 底部内容 2.用例 class TextFieldPage extends Statele...
Flutter实战项目-第八篇 监听键盘弹起
Javon_huang的博客
05-08 3312
概要 监听应用软键盘收齐弹出 一、WidgetsBindingObserver WidgetsBindingObserver类可以使用于监听页面的生命周期，根据用户时间需求响应响应时间。 didChangeMetrics在页面高度发生变化的时候会触发该回调。 class Chat extends StatefulWidget { const Chat({ Key? key }) : super(key: key); static const routeName = '/c......
Flutter入门与实战：菜单弹出框
09-15
Flutter入门与实战：菜单弹出框
Flutter质感设计之弹出菜单
08-27
主要为大家详细介绍了Flutter质感设计之弹出菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轻松掌握Flutter中的键盘操作技巧
m0_69656288的博客
04-26 2118
最后，让我们来看看如何自定义键盘。如果你希望在某些情况下使用不同于系统键盘的键盘，那么可以使用GestureDetector和Overlay来实现。bottom: 0,left: 0,right: 0,),),),],),),),// 显示自定义键盘},),),复制代码在上面的示例中，我们创建了一个OverlayEntry并将其放置在GestureDetector中。当你点击文本框时，自定义键盘会出现在底部。你可以根据自己的需要修改键盘的布局和样式。
flutter 键盘挡住输入框问题
weixin_44911775的博客
09-01 682
【代码】flutter 键盘挡住输入框问题。
Flutter | 可能是目前最好用的仿微信聊天长按弹出框 WPopupMenu
Flutter笔记
08-09 3795
很多用 iOS 的小伙伴都用过该功能：微信聊天窗口，长按某一条消息，弹出弹框，选择「复制、转发...」等等。基于这个需求，我封装了一个 「WPopupMenu」。WPop...
Flutter 点击输入框后 键盘闪出后立刻消失
phetppy的博客
05-20 1574
flutter 在布局最顶端使用的是Scaffold组件，在点击输入框键盘弹出后，布局的默认反应是改变屏幕大小重新布局。 这时通常会在Scaffold中添加选项： resizeToAvoidBottomPadding:false 添加之后，应用整体布局不会随着键盘弹出而刷新改变。 但是键盘的弹出仍然会改变 MediaQuery.of(context).size获取到的数值，因此如果有输入框的父组件通过MediaQuery来决定自身大小的话，在键盘弹出的时候整个组件仍然会进行刷新导致键盘隐藏。
flutter开发实战-RawKeyboardListener监听键盘事件及keycode。
一名开发者
08-04 3356
flutter开发实战-RawKeyboardListener监听键盘事件及keycode，可以监听按下，松开，keycode等相关功能
Flutter - 5 : 键盘遮挡输入框问题，以及阻止系统键盘弹出
热门推荐
Alpha的粪坑
12-19 1万+
Flutter - 5 : 键盘遮挡输入框问题，以及阻止系统键盘弹出 Flutter中的输入框控件TextField竟然在被键盘遮挡的时候没有上移的行为，真是坑爹。 中间参考过某位大神的解决办法，然而没成功，可能是我看的不够仔细，用的方法不对。 链接如下：点击跳转某位大神的解决办法 没办法，只能自己解决，暴力的解决。效果如下图： 解决办法： 如果系统没给向上滑动，那就自己控制它向上滑动，Singl...
flutter 监听键盘弹起和收回
05-26
在Flutter中，可以使用以下代码来监听键盘弹起和收回事件： ```dart import 'package:flutter/services.dart'; // 监听键盘弹起和收回 final keyboardVisibilityController = KeyboardVisibilityController(); bool isKeyboardVisible = false; class KeyboardVisibilityController { final ValueNotifier<bool> visibilityNotifier = ValueNotifier<bool>(false); KeyboardVisibilityController() { // 监听键盘弹起和收回事件 SystemChannels.keyboard.addListener(_handleKeyboardVisibility); } void _handleKeyboardVisibility() { final bool isKeyboardOpen = WidgetsBinding.instance!.window.viewInsets.bottom > 0; visibilityNotifier.value = isKeyboardOpen; } void dispose() { // 移除监听 SystemChannels.keyboard.removeListener(_handleKeyboardVisibility); } } ``` 在上面的代码中，我们创建了一个 `KeyboardVisibilityController` 类来监听键盘弹起和收回事件。我们首先定义了一个 `ValueNotifier` 类型的对象 `visibilityNotifier`，用于通知键盘是否弹起。然后在构造函数中，我们调用 `SystemChannels.keyboard.addListener` 方法来添加监听器 `_handleKeyboardVisibility`，该方法将在键盘弹起和收回时被调用。在 `_handleKeyboardVisibility` 方法中，我们检查当前视图是否有底部间距，如果有，则表示键盘处于打开状态，否则表示键盘处于关闭状态。最后，我们在 `dispose` 方法中移除了监听器。 使用以上代码后，我们可以在其他 Widget 中监听键盘弹起和收回的事件，如下所示： ```dart class MyWidget extends StatefulWidget { @override _MyWidgetState createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> { @override void initState() { super.initState(); // 监听键盘弹起和收回事件 keyboardVisibilityController.visibilityNotifier.addListener(() { setState(() { isKeyboardVisible = keyboardVisibilityController.visibilityNotifier.value; }); }); } @override void dispose() { // 移除监听 keyboardVisibilityController.visibilityNotifier.removeListener(() { setState(() { isKeyboardVisible = keyboardVisibilityController.visibilityNotifier.value; }); }); super.dispose(); } @override Widget build(BuildContext context) { return Container( child: isKeyboardVisible ? Text('键盘弹起了') : Text('键盘收回了'), ); } } ``` 在上面的代码中，我们在 `initState` 方法中添加了键盘弹起和收回的监听器，并在 `dispose` 方法中移除监听器。在 `build` 方法中，我们根据 `isKeyboardVisible` 变量来显示不同的文本内容，以便在键盘弹起或收回时进行不同的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王 哪跑！！！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值