Flutter交互式键盘功能插件flutter_interactive_keyboard的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter交互式键盘功能插件flutter_interactive_keyboard的使用

Flutter Interactive Keyboard 是一个模仿 iOS 交互式可拖动关闭键盘的功能插件。对于 Android,由于 Android 键盘的限制,行为仍然适用但没有动画。

如何使用它

KeyboardManagerWidget 定义了启用可拖动键盘的区域。手势传递给该小部件以允许滚动和拖动关闭的行为。

基本用法

focusNode 在使用 TextField 管理键盘打开和关闭时是必需的。

以下是一个基本示例:

import 'package:flutter/material.dart';
import 'package:flutter_interactive_keyboard/flutter_interactive_keyboard.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final FocusNode _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          title: const Text('Interactive Keyboard'),
        ),
        body: Container(
          margin: EdgeInsets.only(top: 100),
          child: Column(
            children: <Widget>[
              TextField(
                focusNode: _focusNode,
                keyboardAppearance: Brightness.dark,
              ),
              Expanded(
                child: KeyboardManagerWidget(
                  focusNode: _focusNode,
                  onKeyboardClose: () {
                    print("keyboardClose");
                  },
                  onKeyboardOpen: () {
                    print("keyboardOpen");
                  },
                  child: ListView.builder(
                    itemCount: 100,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text("element $index"),
                      );
                    },
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

高级用法

更改 focusNode

如果您的应用程序中有多个 TextField 需要触发键盘,可以从 KeyboardManagerWidgetState 更改当前的 FocusNode,如下所示:

首先初始化变量:

GlobalKey<KeyboardManagerWidgetState> _key = GlobalKey();

在构建方法中使用:

KeyboardManagerWidget(
  key: _key,
  focusNode: _focusNode,
  ...
)

然后可以在任何地方更改 FocusNode

_key.currentState.substituteFocusNode = newFocusNode;

注意事项

  • 此插件目前不在积极开发中,如果您想贡献,请欢迎提交 PR。
  • 对于 Android 设备,由于 Android 键盘的限制,行为仍然适用但没有动画。

以上内容提供了完整的示例代码,帮助您在 Flutter 应用程序中实现交互式键盘功能。


这个Markdown文档详细介绍了如何使用 `flutter_interactive_keyboard` 插件,并提供了完整的示例代码供参考。希望对您有所帮助!

更多关于Flutter交互式键盘功能插件flutter_interactive_keyboard的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter交互式键盘功能插件flutter_interactive_keyboard的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用Flutter交互式键盘功能插件flutter_interactive_keyboard的代码案例。这个插件允许你在Flutter应用中创建自定义键盘和交互。

首先,确保你已经在你的pubspec.yaml文件中添加了flutter_interactive_keyboard依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_interactive_keyboard: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来安装依赖。

接下来,你可以在你的Flutter项目中创建自定义键盘并处理输入事件。以下是一个完整的示例,包括创建一个简单的自定义键盘和展示输入内容。

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_interactive_keyboard/flutter_interactive_keyboard.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Interactive Keyboard Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: _controller,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Input Text',
                ),
              ),
              SizedBox(height: 20),
              CustomKeyboard(),
            ],
          ),
        ),
      ),
    );
  }
}

class CustomKeyboard extends StatefulWidget {
  @override
  _CustomKeyboardState createState() => _CustomKeyboardState();
}

class _CustomKeyboardState extends State<CustomKeyboard> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomKey(
              text: 'Q',
              onPressed: () => _controller.value = _controller.value.copyWith(
                text: _controller.text + 'Q',
                selection: TextSelection.collapsed(offset: _controller.text.length),
              ),
            ),
            CustomKey(
              text: 'W',
              onPressed: () => _controller.value = _controller.value.copyWith(
                text: _controller.text + 'W',
                selection: TextSelection.collapsed(offset: _controller.text.length),
              ),
            ),
            CustomKey(
              text: 'E',
              onPressed: () => _controller.value = _controller.value.copyWith(
                text: _controller.text + 'E',
                selection: TextSelection.collapsed(offset: _controller.text.length),
              ),
            ),
          ],
        ),
        // Add more rows for other keys as needed
      ],
    );
  }
}

class CustomKey extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  CustomKey({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.black),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Center(
          child: Text(
            text,
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

解释

  1. 依赖管理:在pubspec.yaml中添加flutter_interactive_keyboard依赖。

  2. 主应用结构:在MyApp中,我们创建了一个简单的Scaffold,包含一个TextField和一个自定义的CustomKeyboard

  3. 自定义键盘CustomKeyboard是一个StatefulWidget,它包含一个TextEditingController,用于管理TextField的文本。

  4. 键盘按键CustomKey是一个StatelessWidget,用于表示单个按键。每个按键都有一个文本标签和一个点击回调,当按键被点击时,会将相应的字符添加到TextField中。

  5. 布局:键盘按键被组织成RowColumn,你可以根据需要添加更多的按键和行。

这个示例展示了如何使用flutter_interactive_keyboard插件创建自定义键盘并与TextField交互。虽然这个插件提供了更高级的功能,比如自定义键盘布局和更多的交互选项,但上面的示例是一个简单的入门。你可以根据需要扩展这个示例来实现更复杂的键盘功能和交互。

回到顶部