Flutter自定义键盘布局插件virtual_keyboard_custom_layout_onex的使用

Flutter自定义键盘布局插件virtual_keyboard_custom_layout_onex的使用

目标

本插件旨在提供一个自定义键盘布局，具有以下特点：

• 无剪贴板功能
• 支持印地语键盘（印度）
• 支持马拉提语（印度）
• 支持英语
• 支持符号输入
• 界面友好（可根据需求定制）
• 方便修改以支持其他语言
• 支持横屏
• 使用体验良好

使用说明

以下是使用该插件的具体步骤及示例代码。

步骤

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

   dependencies:
     virtual_keyboard_custom_layout_onex: ^版本号
   

2. 导入包： 在 Dart 文件中导入 virtual_keyboard_custom_layout_onex 包。

   import 'package:virtual_keyboard_custom_layout_onex/virtual_keyboard_custom_layout_onex.dart';
   

3. 初始化应用： 创建主应用类 MyApp 并设置初始状态。

   void main() => runApp(const MyApp());
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Virtual Keyboard Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         debugShowCheckedModeBanner: false,
         home: const MyHomePage(title: 'Virtual Keyboard Demo'),
       );
     }
   }
   

4. 创建主页面： 创建主页面类 MyHomePage 并设置文本字段控制器。

   class MyHomePage extends StatefulWidget {
     final String title;
     const MyHomePage({super.key, required this.title});
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     // 用户输入的文本
     String text = '';
   
     // 是否启用大写
     bool shiftEnabled = false;
   
     // 是否显示数字键盘
     bool isNumericMode = false;
   
     // 控制器用于维护焦点并插入字符串中间的字符
     TextEditingController controllerField01 = TextEditingController();
     TextEditingController controllerField02 = TextEditingController();
     TextEditingController controllerField03 = TextEditingController();
   
     // 键盘变量，用于使用 KeyboardAux 类
     var isKeyboardVisible = false;
     var controllerKeyboard = TextEditingController();
   
     // 自定义键盘默认语言布局
     TypeLayout typeLayout = TypeLayout.alphabet;
   
     // 自定义语言
     late String userLanguage = "english";
   
     // 显示语言选择对话框
     void showSelectionDialog() {
       showDialog(
         context: context,
         builder: (BuildContext context) {
           return AlertDialog(
             title: const Text('Select Language'),
             content: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
                 ListTile(
                   title: const Text('English Language'),
                   onTap: () {
                     setState(() {
                       typeLayout = TypeLayout.alphabet;
                       userLanguage = "english";
                       isKeyboardVisible = true;
                     });
                     Navigator.pop(context);
                   },
                 ),
                 ListTile(
                   title: const Text('Hindi Language'),
                   onTap: () {
                     setState(() {
                       typeLayout = TypeLayout.hindi1;
                       userLanguage = "hindi";
                       isKeyboardVisible = true;
                     });
                     Navigator.pop(context);
                   },
                 ),
                 ListTile(
                   title: const Text('Marathi Language'),
                   onTap: () {
                     setState(() {
                       typeLayout = TypeLayout.marathi1;
                       userLanguage = "marathi";
                       isKeyboardVisible = true;
                     });
                     Navigator.pop(context);
                   },
                 ),
               ],
             ),
           );
         },
       );
     }
   
     @override
     Widget build(BuildContext context) {
       return GestureDetector(
         onTap: () {
           FocusScope.of(context).unfocus();
           setState(() {
             isKeyboardVisible = false;
           });
         },
         child: Scaffold(
           appBar: AppBar(
             title: Text(widget.title),
             actions: [
               IconButton(
                   onPressed: () {
                     showSelectionDialog();
                   },
                   icon: const Icon(Icons.one_k))
             ],
           ),
           body: Stack(
             children: [
               Center(
                 child: Column(
                   children: [
                     TextFormField(
                       keyboardType: TextInputType.none,
                       controller: controllerField01,
                       maxLines: null,
                       minLines: null,
                       onTap: () {
                         setState(() {
                           isKeyboardVisible = true;
                           controllerKeyboard = controllerField01;
                         });
                       },
                     ),
                     TextFormField(
                       keyboardType: TextInputType.none,
                       controller: controllerField02,
                       maxLines: null,
                       minLines: null,
                       onTap: () {
                         setState(() {
                           isKeyboardVisible = true;
                           controllerKeyboard = controllerField02;
                         });
                       },
                     ),
                     TextFormField(
                       keyboardType: TextInputType.none,
                       controller: controllerField03,
                       maxLines: null,
                       minLines: null,
                       onTap: () {
                         setState(() {
                           isKeyboardVisible = true;
                           controllerKeyboard = controllerField03;
                         });
                       },
                     ),
                     Expanded(
                       child: Container(),
                     ),
                   ],
                 ),
               ),
               if (isKeyboardVisible)
                 Align(
                   alignment: Alignment.bottomCenter,
                   child: KeyboardAux(
                     languageChangeCallback: () {
                       showSelectionDialog();
                     },
                     controller: controllerKeyboard,
                     typeLayout: typeLayout,
                     keyboardLanguage: userLanguage,
                   ),
                 ),
             ],
           ),
         ),
       );
     }
   }