Flutter键盘可见性检测插件mobile_keyboard_visibility的使用

Flutter键盘可见性检测插件mobile_keyboard_visibility的使用

获取键盘高度

Getting Started

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

dependencies:
  mobile_keyboard_visibility: ^0.0.6

在 Dart 代码中初始化并使用插件：

import 'package:flutter/material.dart';
import 'package:mobile_keyboard_visibility/mobile_keyboard_visibility.dart';
import 'package:mobile_keyboard_visibility/mobile_keyboard_visibility_platform_interface.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _mobileKeyboardVisibilityPlugin = MobileKeyboardVisibility();
  double height = 0;
  KeyboardStatus status = KeyboardStatus.didHide;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 监听键盘事件
    _mobileKeyboardVisibilityPlugin.mobileKeyBoardListener(
      onHeight: (sender) {
        // 更新键盘高度
        setState(() {
          height = sender;
        });
      },
      onShow: (sender) {
        // 更新键盘状态
        setState(() {
          status = sender;
        });
      },
    );
  }

  [@override](/user/override)
  void dispose() {
    // 释放资源
    _mobileKeyboardVisibilityPlugin.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(
            children: [
              const TextField(),
              Text("键盘高度 $height"),
              Text("键盘弹出 $status"),
              TextButton(
                onPressed: () => _mobileKeyboardVisibilityPlugin.dispose(),
                child: Text("dispose")
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter键盘可见性检测插件mobile_keyboard_visibility的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter键盘可见性检测插件mobile_keyboard_visibility的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


mobile_keyboard_visibility 是一个用于检测移动设备键盘可见性的 Flutter 插件。它可以帮助你监听键盘的打开和关闭事件，并根据键盘的状态来调整 UI 或执行其他操作。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 mobile_keyboard_visibility 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  mobile_keyboard_visibility: ^0.1.0

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 mobile_keyboard_visibility 插件：

import 'package:mobile_keyboard_visibility/mobile_keyboard_visibility.dart';

3. 监听键盘可见性

你可以使用 MobileKeyboardVisibility 来监听键盘的可见性变化。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:mobile_keyboard_visibility/mobile_keyboard_visibility.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: KeyboardVisibilityExample(),
    );
  }
}

class KeyboardVisibilityExample extends StatefulWidget {
  @override
  _KeyboardVisibilityExampleState createState() => _KeyboardVisibilityExampleState();
}

class _KeyboardVisibilityExampleState extends State<KeyboardVisibilityExample> {
  bool _isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();
    MobileKeyboardVisibility.onChange.listen((bool visible) {
      setState(() {
        _isKeyboardVisible = visible;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Keyboard Visibility Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              _isKeyboardVisible ? 'Keyboard is visible' : 'Keyboard is hidden',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            TextField(
              decoration: InputDecoration(
                hintText: 'Type something...',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. 解释代码

  • MobileKeyboardVisibility.onChange 是一个 Stream，当键盘的可见性发生变化时，它会发出一个 bool 值，表示键盘是否可见。
  • 在 initState 方法中，我们监听了这个 Stream，并在键盘可见性发生变化时更新 _isKeyboardVisible 状态。
  • 在 build 方法中，我们根据 _isKeyboardVisible 的值来显示不同的文本。

5. 其他功能

mobile_keyboard_visibility 还提供了其他一些功能，例如直接获取当前的键盘可见性状态：

bool isKeyboardVisible = await MobileKeyboardVisibility.isKeyboardVisible;
回到顶部