Flutter Keyboard Visibility 使用教程

最新推荐文章于 2024-12-18 14:05:21 发布

井彬靖Harlan

最新推荐文章于 2024-12-18 14:05:21 发布

阅读量470

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00946/article/details/141989301

Flutter Keyboard Visibility 使用教程

flutter_keyboard_visibility项目地址:https://gitcode.com/gh_mirrors/flu/flutter_keyboard_visibility

1、项目介绍

flutter_keyboard_visibility 是一个专门为 Flutter 应用程序设计的插件，用于检测软件键盘（虚拟键盘）在屏幕上的显示和隐藏状态。通过这个库，开发者可以轻松地监听键盘的可见性变化，并根据键盘的状态来调整应用的 UI 布局或执行其他操作。

项目地址: https://github.com/adee42/flutter_keyboard_visibility

2、项目快速启动

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_keyboard_visibility: ^6.0.0

然后运行 flutter pub get 来安装依赖。

使用

选项 1: 在 Widget 树中使用 `KeyboardVisibilityBuilder`

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

@override
Widget build(BuildContext context) {
  return KeyboardVisibilityBuilder(
    builder: (context, isKeyboardVisible) {
      return Text(
        'The keyboard is: ${isKeyboardVisible ? 'VISIBLE' : 'NOT VISIBLE'}',
      );
    },
  );
}

选项 2: 在 Widget 树中使用 `KeyboardVisibilityProvider`

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

@override
Widget build(BuildContext context) {
  return KeyboardVisibilityProvider(
    child: MyDemoPage(),
  );
}

class MyDemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bool isKeyboardVisible = KeyboardVisibilityProvider.isKeyboardVisible(context);
    return Text(
      'The keyboard is: ${isKeyboardVisible ? 'VISIBLE' : 'NOT VISIBLE'}',
    );
  }
}

选项 3: 直接查询和订阅键盘可见性

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'dart:async';

late final KeyboardVisibilityController _controller;

@override
void initState() {
  super.initState();
  _controller = KeyboardVisibilityController();
  _controller.onChange.listen((bool visible) {
    print('Keyboard visibility update: $visible');
  });
}

3、应用案例和最佳实践

案例 1: 根据键盘可见性调整 UI 布局

在聊天应用中，当键盘弹出时，通常需要将输入框和消息列表向上移动，以避免被键盘遮挡。使用 flutter_keyboard_visibility 可以轻松实现这一功能。

@override
Widget build(BuildContext context) {
  return KeyboardVisibilityBuilder(
    builder: (context, isKeyboardVisible) {
      return Column(
        children: [
          Expanded(
            child: ListView(
              children: _messages,
            ),
          ),
          if (isKeyboardVisible)
            Container(
              height: 50,
              color: Colors.grey[200],
              child: TextField(),
            ),
        ],
      );
    },
  );
}

案例 2: 键盘弹出时自动滚动到最新消息

在聊天应用中，当键盘弹出时，自动滚动到最新消息，以确保用户可以看到最新的对话内容。

@override
void initState() {
  super.initState();
  _controller = KeyboardVisibilityController();
  _controller.onChange.listen((bool visible) {
    if (visible) {
      _scrollController.animateTo(
        _scrollController.position.maxScrollExtent,
        duration: Duration(milliseconds: 300),
        curve: Curves.easeOut,
      );
    }
  });
}