关于flutter:Flutter-的-keyboardactions-插件

43次阅读

共计 5103 个字符，预计需要花费 13 分钟才能阅读完成。

原文

https://medium.com/flutterdev…

代码

https://github.com/flutter-de…

参考

  • https://pub.dev/packages/keyb…

注释

理解如何在您的 Flutter 应用程序自定义默认键盘

Flutter 中的键盘动作

安卓 /IoS 提供的键盘没有暗藏键盘的按钮，这给用户带来了很多不便。当咱们的应用程序有许多须要在工具栏上显示操作键和解决定义为字段的函数的 textfield 时。键盘操作是当用户点击以后字段时批示该字段操作的键。

在这篇文章中，我将演示如何应用蕴含字段的表单输出在应用程序中显示键盘操作。咱们还将实现一个演示程序，并应用包 keyboard action 来演示这些个性。我试图用一种简略的形式来解释我的我的项目

简介:

KEYBOARD_ACTION 提供了几个软件包，使您的设施键盘可定制。明天，咱们探讨 KEYBOARD action。在 iOS 中有一个家喻户晓的问题，当咱们应用数字输出字段时，它不会显示键盘外部 / 上方的实现按钮。因而，键盘操作提供了各种性能，有助于克服用户和开发人员目前面临的问题。

https://pub.dev/packages/keyb…

特点:

  • 实现键盘按钮 (您能够自定义按钮)
  • 在文本字段之间高低挪动 (能够暗藏设置)nextFocus: false).
  • 键盘栏定制
  • 键盘栏下方的自定义页脚小部件
  • 用简略的办法创立你本人的键盘
  • 你能够在安卓、iOS 或者两个平台上应用它
  • 与对话框兼容

设立我的项目:

第一步: 应用包装

keyboard_actions | Flutter Package

键盘操作 | Flutter Package

以一种简略的形式为 Android/iOS 键盘增加个性。因为安卓 /iOS 提供的键盘..

pub.dev

https://pub.dev/packages/keyb…

在 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: EdgeInsets.only(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: TextInputAction.next
            ),
            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 配置能力在键盘上增加配置。

return KeyboardActions(
    tapOutsideBehavior: TapOutsideBehavior.translucentDismiss,
    _//autoScroll: true,_ config: _buildConfig(context),
    child: Card(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),
      ),
      elevation: 8.0,
      child: Container(padding: EdgeInsets.only(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: TapOutsideBehavior.translucentDismiss,

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。

KeyboardActionsItem(
  focusNode: _nodeText6,
  footerBuilder: (_) => PreferredSize(
      child: SizedBox(
          height: 40,
          child: Center(child: Text(_customController.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(),)
            ],
          );
        });
  },
),

当咱们运行应用程序时，咱们失去屏幕的输入视频，如下所示，用户能够察看输入。

结语:

在本文中，我曾经简略地介绍了 KeyboardAction 包的根本构造; 您能够依据本人的抉择批改这段代码，也能够依据本人的需要应用这个包。这是一个小的介绍键盘定制用户交互从我这边，它的工作应用 Flutter。

© 猫哥

  • https://ducafecat.tech/
  • https://github.com/ducafecat
  • 微信群 ducafecat
  • b 站 https://space.bilibili.com/40…

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

正文完
flutter
发表至： flutter
2021-09-05
 0
关于flutter:报名开启｜和你约定在-Google-应用出海指南针
关于flutter:译5个高效的Flutter开发工具
关于flutter:flutter-最简单的应用程序图标制作方法
关于flutter:Flutter自定义时间轴timeline