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

发布于 1周前 作者 itying888 来自 Flutter

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

插件简介

flutter_keyboard_visibility_temp_forkflutter_keyboard_visibility 的一个临时非官方分叉版本,旨在解决在 flutter_quill 中遇到的一些问题(参见 issue #2290issue #1889)。此分叉版本将被维护一段时间,直到找到替代方案或修复这些问题。

需要注意的是,我们不建议将此包作为发布到 pub.dev 的包的依赖项,因为它很可能在短时间内被废弃。然而,如果你正在开发应用程序,这可能是你在这些 PR 在上游仓库中被审查或找到替代方案之前的临时替代品:

除非有强烈的原因,否则我们不打算引入破坏性更改,即使 API 可能会变得不太干净。flutter_keyboard_visibility_platform_interface 仍然是依赖项。

解决的问题

  • 使用 Flutter 默认的 compileSdkVersion 作为 Flutter bug #63533 的变通方法。允许你针对最新的 compileSdkVersion
  • 支持 Flutter/WASM。目前使用 dart:htmlpackage:js 将阻止编译使用 Wasm 目标的 App。看起来 flutter_keyboard_visibility_web 被创建为在 Web 平台上始终返回 false。Web 仍然不受支持。

现有的代码可以通过替换以下导入语句来继续工作:

import 'package:flutter_keyboard_visibility_temp_fork/flutter_keyboard_visibility_temp_fork.dart';

一旦你从 pubspec.yaml 中移除了 flutter_keyboard_visibility 并添加了 flutter_keyboard_visibility_temp_fork

flutter_keyboard_visibility_webflutter_keyboard_visibility 已经合并成一个包,因为我们没有看到我们的分叉需要多个包的强烈原因。桌面平台不支持(虚拟键盘检测仍然是一个特性),Web 仍然不受支持。该包应该在这些不支持的平台上返回 false。仅支持 Android 和 iOS。

flutter_keyboard_visibility_temp_fork 分叉仍然依赖于 flutter_keyboard_visibility_platform_interfaceflutter_keyboard_visibility_macosflutter_keyboard_visibility_windowsflutter_keyboard_visibility_linux 以保持兼容性。

更多关于用法的详细信息,请参考 flutter_keyboard_visibility

示例代码

下面是一个完整的示例应用,展示了如何使用 flutter_keyboard_visibility_temp_fork 来检测键盘的可见性:

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

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

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Demo(),
    );
  }
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return KeyboardDismissOnTap(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Keyboard Visibility Example'),
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(24.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                TextField(
                  keyboardType: TextInputType.text,
                  decoration: InputDecoration(
                    labelText: 'Input box for keyboard test',
                  ),
                ),
                Container(height: 60.0),
                KeyboardVisibilityBuilder(builder: (context, visible) {
                  return Text(
                    'The keyboard is: ${visible ? 'VISIBLE' : 'NOT VISIBLE'}',
                  );
                }),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的应用程序,其中包含一个文本输入框和一个显示键盘可见性的文本。当用户点击文本输入框时,键盘出现,并且文本会更新为 “VISIBLE”;当键盘消失时,文本会更新为 “NOT VISIBLE”。

通过这种方式,你可以轻松地检测键盘的可见性并根据其状态调整你的 UI 或执行其他操作。


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

1 回复

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


当然,以下是如何在Flutter项目中使用flutter_keyboard_visibility_temp_fork插件来检测键盘可见性的代码示例。这个插件允许你监听键盘的打开和关闭事件,并根据这些事件执行相应的操作。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加flutter_keyboard_visibility_temp_fork依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_keyboard_visibility_temp_fork: ^5.0.0  # 请检查最新版本号

2. 安装依赖

运行以下命令来安装依赖:

flutter pub get

3. 导入插件

在你需要监听键盘可见性的Dart文件中导入插件:

import 'package:flutter_keyboard_visibility_temp_fork/flutter_keyboard_visibility_temp_fork.dart';

4. 使用插件

以下是一个简单的示例,展示了如何监听键盘的可见性变化,并在控制台打印相应的信息:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Keyboard Visibility Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: KeyboardVisibilityDemo(),
    );
  }
}

class KeyboardVisibilityDemo extends StatefulWidget {
  @override
  _KeyboardVisibilityDemoState createState() => _KeyboardVisibilityDemoState();
}

class _KeyboardVisibilityDemoState extends State<KeyboardVisibilityDemo> with WidgetsBindingObserver {
  bool _isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addObserver(this);
    KeyboardVisibility.addChangeListener(_onKeyboardVisibilityChanged);
  }

  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance?.removeObserver(this);
    KeyboardVisibility.removeChangeListener(_onKeyboardVisibilityChanged);
  }

  void _onKeyboardVisibilityChanged(bool isVisible) {
    setState(() {
      _isKeyboardVisible = isVisible;
      print('Keyboard is ${isVisible ? 'visible' : 'not visible'}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Keyboard Visibility Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Keyboard Visibility:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 16),
            TextField(
              decoration: InputDecoration(
                labelText: 'Type something...',
              ),
            ),
            SizedBox(height: 32),
            Text(
              'Is Keyboard Visible? $_isKeyboardVisible',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 添加依赖:在pubspec.yaml中添加依赖项。
  2. 导入插件:在需要使用插件的文件中导入flutter_keyboard_visibility_temp_fork
  3. 监听键盘可见性变化
    • 使用KeyboardVisibility.addChangeListener方法添加一个监听器。
    • 在监听器中更新状态,并打印键盘可见性状态。
  4. 清理资源:在dispose方法中移除监听器并清理资源。

这个示例展示了如何在Flutter应用中检测键盘的可见性,并根据这个信息更新UI或执行其他逻辑。你可以根据实际需求进一步扩展这个示例。

回到顶部