Flutter输入法嵌入管理插件menk_embed_ime_db的使用

Flutter输入法嵌入管理插件menk_embed_ime_db的使用

Menksoft旧标准蒙古语嵌入式输入法插件带有词库。

Web Demo 点击这里

注意: 该包使用了sqlite3包。如果你的应用已经使用了sqlite3或者没有使用任何SQLite包，那么使用此包是没有问题的。然而，如果你使用了其他的SQLite库，例如sqflite，可能会与sqlite3发生冲突。首先尝试使用此包。如果遇到问题，可能是由于冲突。这种情况下，请改用menk_embed_ime包。menk_embed_ime不包含任何词库和SQLite包，只包含输入逻辑。在这种情况下，你需要自己导入词库，并可以参考此包的源码。

特性

  • 将输入法嵌入到Flutter应用中，支持所有平台。
  • 在移动设备上，默认使用软键盘。
  • 移动设备上，当一个蒙古文文本框（MongolTextField）或普通文本框（TextField）获得或失去焦点时，软键盘会自动显示或隐藏。
  • 在桌面端，默认使用硬键盘。
  • 使用输入逻辑显示基本候选词。
  • 使用数据库显示额外候选词。
  • 用户从候选框中选择一个词后，显示下一个候选词。
  • 支持MongolTextField和TextField。

开始使用

虽然mongol库是可选的，但建议添加。它包含了MongolTextField、MongolText和其他垂直蒙古文组件。为了方便起见，在本指南中没有导入mongol库。 如果想使用mongol库，请按照官方指南导入mongol库，并将本指南中的TextField替换为MongolTextField。

1. 添加所需的库
dependencies:
  menk_embed_ime_db: ^0.0.4

运行flutter pub get。

2. 添加Menksoft的旧标准蒙古字体

如果使用了mongol库，可以跳过这一步。但是，请确保在项目中使用的是Menksoft的旧标准蒙古字体。

基本操作只需创建一个fonts文件夹，并在pubspec.yaml中声明字体：

flutter:
  fonts:
    - family: MenkQagan
      fonts:
        - asset: fonts/MQG8F02.ttf
  • 设置默认蒙古字体

在main.dart文件中，设置应用程序主题的fontFamily。

MaterialApp(
  theme: ThemeData(fontFamily: 'MenkQagan'),
  // ...
);

现在你无需为每个文本小部件手动设置字体。如果某些小部件需要使用不同的字体，可以在TextStyle中正常设置fontFamily。

3. 初始化词库

在你的应用的main.dart文件中，添加initMenkDB。

void main() {
  runApp(const DemoApp());
  initMenkDB();
}

注意: 此库使用了sqlite3.wasm和menk_ime.db资源文件。在Web上，这些资源文件可能冻结你的Web应用服务器，因为这些文件过大且从Web应用服务器加载。在这种情况下，建议将所有资源文件上传到CDN服务器，并使用initializeEngine方法自定义初始化引擎，通过assetBase参数指定资源文件路径，详情请参阅此文档。

4. 使用menk_embed_ime_db
  • 导入库
import 'package:menk_embed_ime_db/menk_embed_ime_db.dart';
  • 添加EmbedKeyboard
[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Menk Embed IME Demo',
    theme: ThemeData(fontFamily: 'MenkQagan'),
    home: Scaffold(
      appBar: AppBar(title: const Text('Menk Embed IME Demo')),
      body: Column(children: [
        const Expanded(child: TextField()),
        EmbedKeyboard(
          layoutBuilders: [
            (i) => MenkLayout(i, converter: DBMenkLayoutConverter()),
            EnglishLayout.create,
          ],
        ),
      ]),
    ),
  );
}

更多关于Flutter输入法嵌入管理插件menk_embed_ime_db的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter输入法嵌入管理插件menk_embed_ime_db的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


menk_embed_ime_db 是一个用于管理 Flutter 应用中输入法嵌入的插件。它可以帮助开发者更好地控制输入法在应用中的显示和行为。以下是使用 menk_embed_ime_db 插件的基本步骤和示例代码。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  menk_embed_ime_db: ^1.0.0  # 请根据实际情况填写版本号

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

2. 导入插件

在你的 Dart 文件中导入 menk_embed_ime_db 插件。

import 'package:menk_embed_ime_db/menk_embed_ime_db.dart';

3. 初始化插件

在使用插件之前，通常需要先进行初始化。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MenkEmbedImeDb.initialize();
  runApp(MyApp());
}

4. 使用插件控制输入法

你可以使用 MenkEmbedImeDb 提供的方法来控制输入法的显示和隐藏。

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Menk Embed IME DB Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  MenkEmbedImeDb.showKeyboard(); // 显示输入法
                },
                child: Text('Show Keyboard'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  MenkEmbedImeDb.hideKeyboard(); // 隐藏输入法
                },
                child: Text('Hide Keyboard'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

5. 处理输入法事件

你还可以监听输入法的事件，例如输入法的显示和隐藏状态。

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

class _MyAppState extends State<MyApp> {
  bool _isKeyboardVisible = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    MenkEmbedImeDb.onKeyboardVisibilityChanged((isVisible) {
      setState(() {
        _isKeyboardVisible = isVisible;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Menk Embed IME DB Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Keyboard is ${_isKeyboardVisible ? 'visible' : 'hidden'}'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  MenkEmbedImeDb.showKeyboard(); // 显示输入法
                },
                child: Text('Show Keyboard'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  MenkEmbedImeDb.hideKeyboard(); // 隐藏输入法
                },
                child: Text('Hide Keyboard'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部