Flutter的keyboard_actions插件
原⽂
代码
参考
pub.dev/packages/keyboard_actions
正⽂
了解如何在您的 Flutter 应⽤程序⾃定义默认键盘
Flutter 中的键盘动作
安卓/IoS 提供的键盘没有隐藏键盘的按钮，这给⽤户带来了很多不便。当我们的应⽤程序有许多需要在⼯具栏上显⽰操作键和处理定义为字段的函数的 textfield 时。键盘操作是当⽤户点击当前字段时指⽰该字段操作的键。
在这篇⽂章中，我将演⽰如何使⽤包含字段的表单输⼊在应⽤程序中显⽰键盘操作。我们还将实现⼀个
演⽰程序，并使⽤包 keyboard action 来演⽰这些特性。我试图⽤⼀种简单的⽅式来解释我的项⽬
简介:
KEYBOARD_ACTION 提供了⼏个软件包，使您的设备键盘可定制。今天，我们讨论 KEYBOARD action。在 iOS 中有⼀个众所周知的问题，当我们使⽤数字输⼊字段时，它不会显⽰键盘内部/上⽅的完成按钮。因此，键盘操作提供了各种功能，有助于克服⽤户和开发⼈员⽬前⾯临的问题。
特点:
完成键盘按钮(您可以⾃定义按钮)
在⽂本字段之间上下移动(可以隐藏设置)nextFocus: false).
键盘栏定制
键盘栏下⽅的⾃定义页脚⼩部件
⽤简单的⽅法创建你⾃⼰的键盘
你可以在安卓、 iOS 或者两个平台上使⽤它
与对话框兼容
设⽴项⽬:
第⼀步: 使⽤包装
keyboard_actions | Flutter Package
键盘操作 | Flutter Package
以⼀种简单的⽅式为 Android/iOS 键盘添加特性。因为安卓/iOS 提供的键盘…
pub.dev
在 pubspec.yaml ⽂件的依赖关系中添加 youtube player_iframe 插件，然后运⾏ $flutter pub get 命令。
dependencies:
keyboard_actions: ^3.4.4
步骤 2: 将包导⼊为
import 'package:keyboard_actions/keyboard_actions.dart';
Code Implementation:
代码实施:
1. 创建⼀个新的 dart ⽂件，名为home_screen.dart . ⽂件夹来设计⽤户界⾯，并编写您希望在项⽬中实现的逻辑
2. 我在 flutter demo 项⽬中构建了长长的 Forms，并在 Android 上运⾏了这个应⽤程序。如果我们使⽤的是 IOS 设备，那么它不会显⽰done 完成 在 iOS 系统中，当我们使⽤数字输⼊字段时，在 Android 系统中，键盘内/上⽅的按钮不会显⽰
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 8.0,
child: Container(
padding: ly(left: 12),
child: Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Input Number with Custom Footer'),
controller: _customController,
focusNode: _nodeText6,
keyboardType: TextInputType._number_,
),
TextFormField(
decoration: InputDecoration(labelText: 'Input Number'),
focusNode: _nodeText1,
keyboardType: TextInputType._number_,
textInputAction:
),
TextFormField(
decoration: InputDecoration(
labelText: 'Custom cross Button'),
focusNode: _nodeText2,
keyboardType: TextInputType._text_,
),
TextFormField(
decoration: InputDecoration(
labelText: 'Input Number with Custom Action'),
focusNode: _nodeText3,
keyboardType: TextInputType._number_,
),
TextFormField(
decoration: InputDecoration(
labelText: 'Input Text without Done button'),
focusNode: _nodeText4,
keyboardType: TextInputType._text_,
),
TextFormField(
decoration: InputDecoration(
labelText: 'Input Number with Toolbar Buttons'),
focusNode: _nodeText5,
keyboardType: TextInputType._number_,
)
,
],
),
),
),
),
);
3. 现在，要在项⽬中添加键盘操作，您需要将所有 TextFormField 包装在 Widget KeyboardAction 下，这个 Widget KeyboardAction 需要 keyboardactivesconfig 配置才能在键盘上添加配置。
tapOutsideBehavior: anslucentDismiss,
_//autoScroll: true,_ config: _buildConfig(context),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 8.0,
child: Container(
padding: ly(left: 12),
child: Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Input Number with Custom Footer'),
controller: _customController,
focusNode: _nodeText6,
keyboardType: TextInputType._number_,
),
4. 提供了⼀个功能，当我们按下设备屏幕上键盘以外的任何地⽅时，可以关闭键盘。所以，我们需要加上这⼀⾏
tapOutsideBehavior: anslucentDismiss,
5. 我们应该初始化分配给不同⽂本字段的 FocusNode 对象。因此，开发⼈员进⾏定制，因为它允许键盘将焦点集中在这个⼩部件上。
final FocusNode _nodeText1 = FocusNode();//Add In TextFormField TextFormField(
decoration: InputDecoration(
labelText: 'Input Number with Toolbar Buttons'),
focusNode: _nodeText1,
keyboardType: TextInputType._number_,
)
6. 我们将定义 keyboardansconfig。包装器为单个配置键盘的动作栏。在 keyboardansconfig 中，我们根据您的需求为每个TextFormField 单独定义由键盘执⾏的操作。我们可以⾃定义键盘颜⾊，键盘和内容之间的分隔线颜⾊，显⽰箭头前/后移动输⼊之间的焦点。
KeyboardActionsConfig _buildConfig(BuildContext context) {
return KeyboardActionsConfig(
keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
keyboardBarColor: Colors._grey_[200],
keyboardSeparatorColor: Colors._redAccent_,
nextFocus: true,
actions: [
7. 现在，我们将根据不同的 TextFormField 中的需求定义动作。
actions: [
KeyboardActionsItem(
focusNode: _nodeText1,
),
8. 要在应⽤程序中显⽰带有⾃定义页脚的输⼊，您需要在您的 KeyboardActionsItem 中实现下⾯的代码，在这⾥我们必须在 Text ⼩部件中传递 TextController。
focusNode: _nodeText6,
footerBuilder: (_) => PreferredSize(
child: SizedBox(
height: 40,
child: Center(
child: Text(_),
)),
preferredSize: Size.fromHeight(40)),
),
9. 为了在你的应⽤程序中显⽰⾃定义对话框，将这个逻辑添加到 KeyboardActionsItem 中指定的焦点节点。
KeyboardActionsItem(
focusNode: _nodeText3,
onTapAction: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text("Show Custom Action"),
actions: <Widget>[
FlatButton(
child: Text("OK"),
onPressed: () => Navigator._of_(context).pop(),
)
]
,alertdialog使用方法
);
});
},
),
当我们运⾏应⽤程序时，我们得到屏幕的输出视频，如下所⽰，⽤户可以观察输出。
结语:
在本⽂中，我已经简单地介绍了 KeyboardAction 包的基本结构; 您可以根据⾃⼰的选择修改这段代码，也可以根据⾃⼰的需求使⽤这个包。这是⼀个⼩的介绍键盘定制⽤户交互从我这边，它的⼯作使⽤ Flutter 。
© 猫哥
ducafecat
往期
开源
GetX Quick Start
新闻客户端
strapi ⼿册译⽂
讨论 ducafecat