flutter 监听软键盘的弹出和关闭

实现

  • 继承 with WidgetsBindingObserver
    • 1、初始化监听
    // 初始化监听页面高度
    WidgetsBinding.instance.addObserver(this)
  • 2、 调用方法
   @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPersistentFrameCallback(
      (_) {
        if (MediaQuery.of(context).viewInsets.bottom == 0) {
          // 关闭键盘
          widget.close();
        } else {
          // 打开键盘
        }
      },
    );
  }
- 3、移除监听
  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
  }
import 'package:ZyFlutter/utils/index.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 评论通用
class CommentComponent extends StatefulWidget {
  // 是否显示
  final bool isShow;
  // 点击关闭
  final Function close;
  CommentComponent({Key key, this.isShow = false, this.close})
      : super(key: key);
  @override
  _CommentComponentState createState() => _CommentComponentState();
}

class _CommentComponentState extends State<CommentComponent>
   with WidgetsBindingObserver {
  bool isShow = true;

  void setValue() {
    setState(() {
      isShow = !widget.isShow;
    });
  }

  @override
  void initState() {
    super.initState();

    // 初始化监听页面高度
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPersistentFrameCallback(
      (_) {
        if (MediaQuery.of(context).viewInsets.bottom == 0) {
          // 关闭键盘
          widget.close();
        } else {
          // 打开键盘
        }
      },
    );
  }

  @override
  void didUpdateWidget(covariant CommentComponent oldWidget) {
    super.didUpdateWidget(oldWidget);
    setValue();
  }
  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
  }
  @override
  Widget build(BuildContext context) {
    return !isShow
        ? Stack(
            children: [
              Opacity(
                opacity: .5,
                child: Container(
                  width: 1.sw,
                  height: MediaQuery.of(context).size.height,
                  decoration: BoxDecoration(color: Colors.black26),
                ),
              ),
              Positioned(
                bottom: 0,
                left: 0,
                child: Container(
                  color: Colors.amber,
                  width: 1.sw,
                  height: 50,
                  padding: EdgeInsets.only(left: 10.sp),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        width: 200.w,
                        color: Colors.blue,
                        padding: EdgeInsets.only(left: 10.sp),
                        child: TextFormField(
                          autofocus: true,
                          decoration: InputDecoration(hintText: "请输入评论"),
                          validator: (String value) {
                            if (value == null || value.isEmpty) {
                              return "请输入评论内容";
                            }
                            return null;
                          },
                        ),
                      ),
                      RaisedButton(
                        onPressed: () {
                          print("发送");
                          setState(() {
                            this.isShow = false;
                          });
                          Utils.showToast("发送成功");
                          widget.close();
                        },
                        child: Text("完成"),
                      )
                    ],
                  ),
                ),
              ),
            ],
          )
        : Container();
  }
}

注意

  • MediaQuery.of(context).viewInsets.bottom获取键盘高度如果无论如何都是0 就查看父级组件的
child: Scaffold(
              resizeToAvoidBottomInset:false,//只要子组件需要监听键盘高度  父组件的所有该属性都应该设置false
              appBar: CenterTitleAppBar(
                title: '页面title',
              ),
              body: ContentPage(),
 ),
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 2
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

第十人i

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

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值