Flutter输入法嵌入插件menk_embed_ime的使用

Flutter输入法嵌入插件menk_embed_ime的使用

特性

  • 将输入法嵌入到Flutter应用中，支持所有平台。
  • 在移动设备上，默认使用软键盘。
  • 在移动设备上，当一个 MongolTextField 或 TextField 获得或失去焦点时，软键盘会自动显示或隐藏。
  • 在桌面端，默认使用硬键盘。
  • 支持数据库。
  • 支持 <code>MongolTextField</code> 和 <code>TextField</code>。

入门指南

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

1. 添加所需的库
dependencies:
  menk_embed_ime: ^0.0.1

运行 <code>flutter pub get</code>。

2. 添加Menksoft的老式蒙古文字体

如果使用了 <code>mongol</code> 库，请跳过此步骤。但是，请确保在项目中使用 <code>Menksoft的老式蒙古文字体</code>。

  • 获取 <a href="https://www.mklai.cn/download-font?productId=a0ec7735b5714334934ff3c094ca0a5e" rel="ugc">Menksoft的老式蒙古文字体</a>
  • 将字体添加到项目中
flutter:
  fonts:
    - family: MenkQagan
      fonts:
        - asset: fonts/MQG8F02.ttf
  • 设置应用程序的默认蒙古文字体 在 <code>main.dart</code> 文件中，设置应用程序主题的 <code>fontFamily</code>。
MaterialApp(
  theme: ThemeData(fontFamily: 'MenkQagan'),
  // ...
);

现在你不需要为每个文本小部件手动设置字体。如果你希望某些小部件使用不同的字体，你仍然可以像平常一样在 <code>TextStyle</code> 中设置 <code>fontFamily</code>。

3. 使用menk_embed_ime
  • 导入库
import 'package:menk_embed_ime/menk_embed_ime.dart';
  • 添加 <code>EmbedKeyboard</code>
[@override](/user/override)
Widget build() {
  return Scaffold(
    body: Column(children: [
      const Expanded(child: TextField()),
      EmbedKeyboard(
        layoutBuilders: const [
          MenkLayout.create,
          EnglishLayout.create,
        ],
      ),
    ]),
  );
}

完成这一步后，库以最低成本导入。你可以运行你的项目并查看效果。

然而，经过这一步后，不支持词库。一些单词无法输入而无需支持词库。在下一个版本中，我将修复这个问题，使其可以在不依赖词库的情况下输入所有单词。词库应该只作为辅助工具。

支持词库

如果你想支持词库，请使用 <a href="https://pub.dev/packages/menk_embed_ime_db">menk_embed_ime_db</a> 而不是这个库。<a href="https://pub.dev/packages/menk_embed_ime_db">menk_embed_ime_db</a> 使用 <a href="https://pub.dev/packages/sqlite3">sqlite3</a> 库和 <a href="https://github.com/Satsrag/embed_input/tree/main/menk_embed_ime_db/db" rel="ugc">menk_ime.db</a> 来显示候选词。

声明

这个库使用了 <a href="https://pub.dev/packages/mongol_code">mongol_code</a> 库。 版权属于 <a href="https://github.com/suragch" rel="ugc">Suragch</a>。

如果有人发现无法输入某些单词或有其他问题，请随时打开问题或提交拉取请求。

示例代码

void main() {
  runApp(const DemoApp());
  db.init();
}

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

  [@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: const [
              MenkLayout.create,
              EnglishLayout.create,
            ],
          ),
        ]),
      ),
    );
  }
}

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

1 回复

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


menk_embed_ime 是一个用于在 Flutter 应用中嵌入输入法的插件。它允许开发者在应用中直接使用自定义的输入法，而不需要依赖系统默认的输入法。这在某些特定场景下非常有用，例如需要在应用中提供特定的输入方式或布局。

以下是如何在 Flutter 项目中使用 menk_embed_ime 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  menk_embed_ime: ^1.0.0  # 请使用最新版本

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

2. 导入插件

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

import 'package:menk_embed_ime/menk_embed_ime.dart';

3. 使用 MenkEmbedIme 组件

你可以使用 MenkEmbedIme 组件来嵌入输入法。通常，你会将它放在 TextField 或 TextFormField 的下方，以便用户在输入时可以看到并使用嵌入的输入法。

class MyHomePage extends StatelessWidget {
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Menk Embed IME Example'),
      ),
      body: Column(
        children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              labelText: 'Enter text',
            ),
          ),
          MenkEmbedIme(
            controller: _controller,
          ),
        ],
      ),
    );
  }
}
回到顶部