Flutter交互式键盘插件cupertino_interactive_keyboard的使用

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

Flutter交互式键盘插件cupertino_interactive_keyboard的使用

插件简介

Cupertino Interactive Keyboard 是一个Flutter插件，旨在实现原生iOS中可交互关闭的键盘效果。GitHub项目地址提供了更多细节和更新信息。

demo1 demo2

此插件可以在等待Flutter团队解决相关问题（如issue #57609）期间作为临时解决方案使用。与依赖于键盘截图的方法不同，该插件预期会更加稳定可靠。

使用入门

基本用法

CupertinoInteractiveKeyboard定义了一个区域，在该区域内可以启用拖动键盘功能。其子组件是否为可滚动组件是可选的。

CupertinoInteractiveKeyboard(
  child: ListView.builder(
    // ...
  ),
);

在聊天类UI中的应用

在类似聊天界面中，通常会在底部附加输入栏。此时可以使用CupertinoInputAccessory widget，它将根据其子组件的高度来设置原生的输入附件视图大小。

CupertinoInputAccessory(
  child: TextField(
    // ...
  ),
);

有关完整实现的例子，请参阅插件仓库中的示例代码。

完整示例Demo

以下是一个完整的示例代码，展示了如何在项目中集成cupertino_interactive_keyboard插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Cupertino Interactive Keyboard Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Expanded(
                child: CupertinoInteractiveKeyboard(
                  child: ListView.builder(
                    itemCount: 30,
                    itemBuilder: (context, index) {
                      return ListTile(title: Text('Item $index'));
                    },
                  ),
                ),
              ),
              const Divider(),
              CupertinoInputAccessory(
                child: Container(
                  color: Colors.grey.shade200,
                  height: 50,
                  child: Row(
                    children: [
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'Enter message...',
                          ),
                        ),
                      ),
                      IconButton(
                        icon: Icon(Icons.send),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

上述代码创建了一个简单的应用界面，其中包含一个带有交互式键盘支持的列表视图以及底部的输入栏。当用户点击输入栏时，键盘将以交互方式弹出，并且可以通过拖拽进行关闭。这为用户提供了一个接近于原生iOS体验的交互模式。


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

Harmonyos Next教程
1 回复

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


当然，我可以为你提供一个关于如何使用Flutter中的cupertino_interactive_keyboard插件的代码示例。这个插件允许你在Flutter应用中实现类似iOS风格的交互式键盘。

首先，确保你已经在pubspec.yaml文件中添加了cupertino_interactive_keyboard依赖：

dependencies:
  flutter:
    sdk: flutter
  cupertino_interactive_keyboard: ^x.y.z  # 请将x.y.z替换为最新版本号

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

以下是一个简单的示例，展示如何使用cupertino_interactive_keyboard插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cupertino Interactive Keyboard Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cupertino Interactive Keyboard Demo'),
        ),
        body: CupertinoKeyboardPage(),
      ),
    );
  }
}

class CupertinoKeyboardPage extends StatefulWidget {
  @override
  _CupertinoKeyboardPageState createState() => _CupertinoKeyboardPageState();
}

class _CupertinoKeyboardPageState extends State<CupertinoKeyboardPage> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Enter text here',
            ),
            keyboardType: TextInputType.multiline,
            maxLines: null,
            textInputAction: TextInputAction.newline,
          ),
          SizedBox(height: 16.0),
          CupertinoInteractiveKeyboard(
            textController: _controller,
            onKeyboardAction: (action) {
              if (action == CupertinoKeyboardAction.done) {
                _controller.clear(); // 示例动作，可以根据需要修改
              }
            },
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，它包含一个TextField和一个CupertinoInteractiveKeyboard。用户可以在TextField中输入文本，而CupertinoInteractiveKeyboard则提供了一个类似于iOS风格的键盘界面。

请注意以下几点：

  1. TextField的textInputAction设置为TextInputAction.newline，以便在按下键盘上的“换行”按钮时不会提交文本（默认情况下，它可能会触发一个提交动作）。
  2. CupertinoInteractiveKeyboard的textController属性与TextField的controller属性绑定，这样键盘输入会实时更新到TextField中。
  3. onKeyboardAction回调用于处理键盘上的动作（如“完成”按钮）。在这个示例中，按下“完成”按钮会清空文本输入，但你可以根据需要修改这个行为。

希望这个示例能帮助你理解如何在Flutter中使用cupertino_interactive_keyboard插件。如果你有任何其他问题，请随时提问！

回到顶部