首页 > 其他分享 >一统天下 flutter - 输入: 软键盘相关

一统天下 flutter - 输入: 软键盘相关

时间:2023-04-14 15:56:22浏览次数:39  
标签:webabcd 软键盘 一统天下 override super flutter

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - 输入: 软键盘相关

示例如下:

lib\input\soft_keyboard.dart

/*
 * 软键盘相关
 */

import 'package:flutter/material.dart';

import '../helper.dart';

class SoftKeyboardDemo extends StatefulWidget {
  const SoftKeyboardDemo({Key? key}) : super(key: key);

  @override
  _SoftKeyboardDemoState createState() => _SoftKeyboardDemoState();
}

/// 通过 WidgetsBindingObserver 可以监听软键盘的显示与隐藏
class _SoftKeyboardDemoState extends State<SoftKeyboardDemo> with WidgetsBindingObserver {

  String message = '';

  @override
  void initState() {
    /// 注册监听
    WidgetsBinding.instance.addObserver(this);
    super.initState();

  }

  @override
  void dispose() {
    /// 移除监听
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  /// 页面尺寸变化时的回调(来自 WidgetsBindingObserver)
  @override
  void didChangeMetrics() {
    /// 页面重新渲染完成后
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      setState(() {
        /// MediaQuery.of(context).viewInsets.bottom 就是当前软键盘的高度,大于 0 就是显示状态,否则就是隐藏状态
        message = "软键盘的高度: ${MediaQuery.of(context).viewInsets.bottom}";
      });
    });
    super.didChangeMetrics();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title"),),
      backgroundColor: Colors.orange,
      /// resizeToAvoidBottomInset - 设置为 true 则会自动滚动,以避免弹出的软键盘遮住输入框的问题
      resizeToAvoidBottomInset: true,
      body: Column(
        children: [
          TextField(),
          MyButton(
            onPressed: () {
              FocusManager.instance.primaryFocus?.unfocus();
            },
            child: Text("关闭软键盘"),
          ),
          MyTextSmall(message),
        ],
      ),
    );
  }
}

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

标签:webabcd,软键盘,一统天下,override,super,flutter
From: https://www.cnblogs.com/webabcd/p/flutter_lib_input_soft_keyboard.html

相关文章

  • 一统天下 flutter - widget 按钮类: Ink/InkWell/InkResponse - 让任意组件支持点击事
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget按钮类:Ink/InkWell/InkResponse-让任意组件支持点击事件和点击效果示例如下:lib\widget\button\ink.dart/**Ink/InkWell/InkResponse-让任意组件支持点击事件和......
  • Flutter与firebase接入
    Flutter与Firebase集成可以帮助开发者创建强大且可扩展的应用程序,Firebase提供了各种后端服务,包括认证、实时数据库、云存储等等功能。以下是Flutter与Firebase的详细介绍和代码示例。Firebase认证Firebase认证可以帮助开发者轻松地添加用户身份验证功能,包括通过电子邮件......
  • 一统天下 flutter - widget 滚动类: DraggableScrollableSheet - 可滚动组件,并且支持
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget滚动类:DraggableScrollableSheet-可滚动组件,并且支持通过拖拽的方式上下展开示例如下:lib\widget\scroll\draggable_scrollable_sheet.dart/**DraggableScrollable......
  • 一统天下 flutter - widget 容器类(只能有一个子): AspectRatio - 按比例
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget容器类(只能有一个子):AspectRatio-按比例示例如下:lib\widget\container\aspect_ratio.dart/**AspectRatio-按比例*/import'package:flutter/material.dart';......
  • 一统天下 flutter - 输入: Draggable/DragTarget - 拖拽
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-输入:Draggable/DragTarget-拖拽示例如下:lib\input\drag.dart/**Draggable/DragTarget-拖拽**Draggable-按下后可拖拽的对象*LongPressDraggable-长按后可......
  • 一统天下 flutter - widget 滚动类: ScrollNotification - 滚动通知
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget滚动类:ScrollNotification-滚动通知示例如下:lib\widget\scroll\scroll_notification.dart/**ScrollNotification-滚动通知*/import'package:flutter/mater......
  • 一统天下 flutter - widget 滚动类: DraggableScrollableSheet - 可滚动组件,并且支持
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget滚动类:DraggableScrollableSheet-可滚动组件,并且支持通过拖拽的方式上下展开示例如下:lib\widget\scroll\draggable_scrollable_sheet.dart/**DraggableScrollable......
  • 一统天下 flutter - widget 状态管理: 状态管理 - 在树上,父监听子的通知
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget状态管理:状态管理-在树上,父监听子的通知示例如下:lib\state\notification_listener.dart/**状态管理-在树上,父监听子的通知**在树上,子通过Notification触......
  • 一统天下 flutter - widget 列表类: GridView - 网格
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget列表类:GridView-网格示例如下:lib\widget\list\grid_view.dart/**GridView-网格*/import'dart:math';import'package:flutter/material.dart';im......
  • Flutter/React native/un-app
    Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。[5] Flutter开源、免费,拥有宽松的开源协议,适合商业项目。Flutter可以方便的加入现有的工程中。在全世界,Flutter正在被越来越多的开发者和组织使......