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(),
 ),