Flutter点击隐藏键盘插件tap_to_dismiss_keyboard的使用

Flutter点击隐藏键盘插件tap_to_dismiss_keyboard的使用

一个微小的包，可以在点击空白区域时隐藏键盘。

问题与解决方案

iOS 没有“关闭键盘”按钮。

我们只有两种方法可以隐藏键盘：

  1. 允许用户点击任何空白区域来关闭键盘。👉 这个包就是这么做的。 ✅ 常见解决方案 ✅ 你的 iOS 用户已经熟悉这种行为 ✅ WhatsApp、Twitter 等应用也使用这种行为。

  2. 在键盘上放置一个小按钮。 🤦‍♂️ 很奇怪。 🤦‍♂️ 使用频率不高。

安装

在 pubspec.yaml 文件中添加依赖项：

dependencies:
    tap_to_dismiss_keyboard:

使用

在你的 build 方法中包裹你的代码：

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: TapToDismissKeyboard( // 包裹整个页面
            child: // 你的代码...
        ),
    );
}

示例代码

下面是一个完整的示例代码，展示了如何使用 tap_to_dismiss_keyboard 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tap To Dismiss Keyboard 示例'),
      ),
      body: TapToDismissKeyboard( // 包裹整个页面
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(
                  labelText: '输入文字',
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 按钮点击事件
                },
                child: Text('点击按钮'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

演示

结束语

就是这样！希望这对你有所帮助。


更多关于Flutter点击隐藏键盘插件tap_to_dismiss_keyboard的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter点击隐藏键盘插件tap_to_dismiss_keyboard的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，当用户在输入框中输入内容时，通常会弹出软键盘。为了在用户点击屏幕其他区域时隐藏键盘，可以使用 tap_to_dismiss_keyboard 插件。这个插件可以很方便地实现点击屏幕其他区域时隐藏键盘的功能。

1. 安装插件

首先，需要在 pubspec.yaml 文件中添加 tap_to_dismiss_keyboard 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  tap_to_dismiss_keyboard: ^1.0.0

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

2. 使用插件

在需要使用的地方，导入 tap_to_dismiss_keyboard 插件：

import 'package:tap_to_dismiss_keyboard/tap_to_dismiss_keyboard.dart';

然后，将你的 Scaffold 或其他需要包裹的部件包裹在 TapToDismissKeyboard 中：

TapToDismissKeyboard(
  child: Scaffold(
    appBar: AppBar(
      title: Text('Tap to Dismiss Keyboard Example'),
    ),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          TextField(
            decoration: InputDecoration(
              labelText: 'Enter something',
            ),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              // Some action
            },
            child: Text('Submit'),
          ),
        ],
      ),
    ),
  ),
);

3. 解释

  • TapToDismissKeyboard 是一个包裹部件，它会监听屏幕上的点击事件。当用户点击屏幕上的非输入区域时，它会自动隐藏键盘。
  • child 参数是你需要包裹的部件，通常是 Scaffold 或者其他容器部件。

4. 自定义行为

如果你需要自定义点击事件的行为，可以通过 onTap 参数来指定一个回调函数：

TapToDismissKeyboard(
  onTap: () {
    // Custom behavior when tapped
    print('Screen tapped!');
  },
  child: Scaffold(
    // Your widget tree
  ),
);
回到顶部