Flutter键盘信息获取插件keyboard

Flutter键盘信息获取插件keyboard_info的使用

此Flutter插件提供了查询系统键盘信息的API。

pub

此Flutter插件提供了查询系统键盘信息的API。

使用

import 'package:keyboard_info/keyboard_info.dart';

void main() async {
  final KeyboardInfo info = await getKeyboardInfo();
  print(info.layout); // "fi"
  print(info.variant); // "mac"
}

平台支持

平台	Layout	Variant	备注
Android	✔	❌	`InputMethodManager.getCurrentInputMethodSubtype()` `InputMethodSubtype.getLanguageTag()`
iOS	✔	❌	`UITextInputMode.activeInputModes` `UITextInputMode.primaryLanguage`
Linux	✔	✔	Cinnamon: `org.gnome.libgnomekbd.keyboard layouts` GNOME: `org.gnome.desktop.input-sources mru-sources` `org.gnome.desktop.input-sources sources` KDE: `~/.local/share/kded5/keyboard/session/layout_memory.xml` `~/.config/kxkbrc` MATE: `org.mate.peripherals-keyboard-xkb.kbd layouts` XFCE: `~/.config/xfce4/xfconf/xfce-perchannel-xml/keyboard-layout.xml` Fallback: `/etc/default/keyboard`
macOS	✔	✔	`TISCopyCurrentKeyboardInputSource()` `TISGetInputSourceProperty()` `kTISPropertyInputSourceLanguages` `kTISPropertyInputSourceID`
Web	❌	❌	不可用（存根）
Windows	✔	❌	`GetKeyboardLayoutName()` `LCIDToLocaleName()`

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用keyboard_info插件来获取键盘布局和变体信息。

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

import 'package:flutter/services.dart';
import 'package:keyboard_info/keyboard_info.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  KeyboardInfo? _keyboardInfo;

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

  // 平台消息是异步的，所以我们初始化在一个异步方法中。
  Future<void> initPlatformState() async {
    KeyboardInfo? keyboardInfo;
    // 平台消息可能会失败，所以我们使用try/catch来捕获PlatformException。
    try {
      keyboardInfo = await getKeyboardInfo();
    } on PlatformException catch (e) {
      print(e);
    }

    // 如果小部件在异步平台消息处理期间从树中移除，则我们希望丢弃回复而不是调用setState来更新我们的不存在的外观。
    if (!mounted) return;

    setState(() {
      _keyboardInfo = keyboardInfo;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('键盘信息示例'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('布局: ${_keyboardInfo?.layout ?? '未加载'}'), // 显示布局信息
              SizedBox(height: 10),
              Text('变体: ${_keyboardInfo?.variant ?? '未加载'}'), // 显示变体信息
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter键盘信息获取插件keyboard_info的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter键盘信息获取插件keyboard_info的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用keyboard_info插件来获取键盘信息的代码示例。keyboard_info插件允许你获取键盘的高度、是否可见等信息，这在创建响应式UI时非常有用。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  keyboard_info: ^3.0.0  # 请确保使用最新版本

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

2. 导入插件

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

import 'package:keyboard_info/keyboard_info.dart';

3. 监听键盘信息

你可以使用KeyboardInfoController来监听键盘的可见性和高度变化。以下是一个完整的示例，展示了如何使用keyboard_info插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Keyboard Info Example'),
        ),
        body: KeyboardInfoListener(
          onChange: (KeyboardInfo keyboardInfo) {
            print('Keyboard visibility: ${keyboardInfo.isVisible}');
            print('Keyboard height: ${keyboardInfo.keyboardSize.height}');
            print('Keyboard width: ${keyboardInfo.keyboardSize.width}');
          },
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              labelText: 'Type something...',
            ),
            maxLines: 10,
          ),
          SizedBox(height: 20),
          Text(
            'Keyboard info will be printed in the console',
            style: TextStyle(fontSize: 14),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

解释

添加依赖和导入插件：在pubspec.yaml中添加依赖并导入插件。
使用KeyboardInfoListener：KeyboardInfoListener是一个widget，它监听键盘的变化并调用onChange回调。
处理键盘信息：在onChange回调中，你可以访问KeyboardInfo对象，该对象包含键盘的可见性、高度和宽度等信息。
构建UI：在示例中，我们创建了一个简单的UI，包含一个TextField，当你点击文本框并弹出键盘时，键盘的信息将在控制台中打印出来。

运行项目

确保你已经正确设置了依赖并导入了插件，然后运行你的Flutter项目。在控制台中，你应该能够看到键盘的可见性和尺寸信息。

这样，你就可以在Flutter项目中使用keyboard_info插件来获取键盘信息了。