Flutter 鸿蒙化实战:keyboard_actions 适配 OpenHarmony,键盘工具栏/完成按钮开箱即用
·
Flutter 鸿蒙化实战:keyboard_actions 适配 OpenHarmony## 前言随着鸿蒙生态的快速发展,越来越多的 Flutter 应用需要适配 OpenHarmony 平台。但生态早期,大量常用三方库只有 Android / iOS 实现,鸿蒙侧只能自己造轮子。为了解决这个问题,CPF-Flutter 社区对一批高频使用的 Flutter 三方库做了 OpenHarmony 平台适配,统一托管在 GitCode 的 CPF-Flutter 组织 下,全部通过 TAG 版本隔离、配套门禁编译验证,开箱即用。本篇是系列文章之一,主角是 keyboard_actions —— 键盘工具栏插件。## keyboard_actions 是什么keyboard_actions(原库 4.2.0)为表单输入框提供一套键盘增强能力,常见于 iOS 风格的"键盘上方工具栏 / 完成按钮":- 键盘工具栏:在键盘上方显示自定义工具条(上一个/下一个/完成按钮等);- 多输入框联动:多个 TextField 间"上一个/下一个"自动聚焦切换;- 完成按钮:收起键盘,方便表单收尾。典型场景:登录/注册、搜索、多字段表单等需要引导用户完成输入并切换焦点的页面。## 适配情况| Flutter 框架版本 | TAG 名称 | 分支名 || — | — | — || 3.7 | 4.2.0-ohos-1.0.0 | master || 3.22 | 4.2.0-ohos-1.0.0 | master || 3.27 | 4.2.0-ohos-1.0.0 | master || 3.35 | 4.2.0-ohos-1.0.0 | master |已验证环境(3.35 为例):Flutter 3.35.8-ohos-0.0.1;SDK 6.0.1(21);DevEco Studio 6.0.1.260;ROM 6.0.0.120 SP6。## 快速接入在 pubspec.yaml 中添加 git 依赖:yamldependencies: keyboard_actions: git: url: https://gitcode.com/CPF-Flutter/fluttertpc_keyboard_actions.git # 按你的 Flutter 框架版本,从上方映射表选择对应 TAG ref: 4.2.0-ohos-1.0.0执行:bashflutter pub get## 使用示例### 为输入框配置键盘工具栏dartimport 'package:flutter/material.dart';import 'package:keyboard_actions/keyboard_actions.dart';class LoginPage extends StatefulWidget { const LoginPage({super.key}); @override State<LoginPage> createState() => _LoginPageState();}class _LoginPageState extends State<LoginPage> { final FocusNode _usernameFocus = FocusNode(); final FocusNode _passwordFocus = FocusNode(); late final KeyboardActionsConfig _config = KeyboardActionsConfig( actions: [ // 账号输入框:下一个 → 跳密码框 KeyboardActionsItem( focusNode: _usernameFocus, displayCloseWidget: false, nextFocusNode: _passwordFocus, ), // 密码输入框:显示"完成" KeyboardActionsItem( focusNode: _passwordFocus, displayCloseWidget: true, onClose: () => FocusScope.of(context).unfocus(), ), ], ); @override void dispose() { _usernameFocus.dispose(); _passwordFocus.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('登录')), body: KeyboardActions( config: _config, child: Column( children: [ TextField(focusNode: _usernameFocus, decoration: const InputDecoration(labelText: '账号')), TextField(focusNode: _passwordFocus, decoration: const InputDecoration(labelText: '密码')), ], ), ), ); }}### 自定义工具栏dartKeyboardActionsConfig( actions: [ KeyboardActionsItem( focusNode: focusNode, footerBuilder: (context, config) => KeyboardToolBar( config: config, children: [ const Text('自定义操作'), const SizedBox(width: 12), KeyboardToolBarAction(text: '完成', onPressed: () => FocusScope.of(context).unfocus()), ], ), ), ],)## API 支持一览| API | 说明 | ohos 支持 || — | — | — || KeyboardActions | 包裹输入框并注入键盘行为 | yes || KeyboardActionsConfig | 键盘行为配置 | yes || KeyboardActionsItem | 单个输入框的配置项 | yes || KeyboardToolBar | 自定义键盘工具栏 | yes |> [!TIP] ohos Support 为 yes 表示鸿蒙平台支持该能力,使用方式与 iOS / Android 保持一致。## 仓库地址- OpenHarmony 适配仓库:https://gitcode.com/CPF-Flutter/fluttertpc_keyboard_actions- 使用问题反馈:请到 CPF-Flutter 社区 Issues 提交问题(社区统一收集跟进);本仓库 Issues 区亦可。## 系列预告截至目前,CPF-Flutter 社区已完成 250+ 个 Flutter 三方库的 OpenHarmony 平台适配,覆盖权限管理、UI 组件、设备信息、位置服务、媒体处理、网络、支付等多个领域,完整的适配清单(含每个库的版本映射表)见:- 适配总览文档:https://gitcode.com/CPF-Flutter/docs/blob/main/ThirdpartyLibrarites.md- 仓库组织:https://gitcode.com/CPF-Flutter本系列后续会陆续挑选高频库展开讲解,比如支付宝支付(tobias)、JS 桥接(flutter_jsbridge_plugin)、User-Agent(fk_user_agent)、设备信息(device_util)等。如果你的 Flutter 应用正在计划适配鸿蒙,欢迎关注 CPF-Flutter 组织,也欢迎参与共建。
更多推荐


所有评论(0)