Flutter自动隐藏键盘插件auto_hide_keyboard的使用

auto_hide_keyboard 是一个Flutter插件，用于在点击屏幕其他区域时自动隐藏键盘。以下是该插件的基本介绍和使用示例。

🔥 预览

✨ 特性

• 🔮 Magic: 同时响应页面上其他小部件的点击事件并自动隐藏键盘。
• 🔢 支持单个页面上的多个TextField而不互相干扰。
• 📋 不影响TextField原有的选择、复制和粘贴功能。

你可以在线试用：在线演示

⚡️ 开始使用

只需将你的 TextField 包装在 AutoHideKeyboard 小部件中即可：

AutoHideKeyboard(
  child: TextField(), // 你的TextField小部件
)

就是这样！

示例代码

以下是一个完整的示例，展示了如何在实际应用中使用 auto_hide_keyboard 插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AutoHideKeyboard',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('AutoHideKeyboard'),
          centerTitle: true,
          bottom: const TabBar(tabs: [
            Tab(text: 'Single'),
            Tab(text: 'Multi'),
          ]),
        ),
        body: const TabBarView(children: [
          SinglePage(),
          MultiPage(),
        ]),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AutoHideKeyboard(
            child: const SimpleTextField(hint: 'TextField 0'),
          ),
          const SimpleButton(),
        ],
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AutoHideKeyboard(
            child: const SimpleTextField(
              hint: 'TextField 1',
            ),
          ),
          Container(height: 24),
          AutoHideKeyboard(
            child: const SimpleTextField(
              hint: 'TextField 2',
            ),
          ),
          const SimpleButton(),
        ],
      ),
    );
  }
}

// 假设SimpleTextField和SimpleButton是自定义的小部件
class SimpleTextField extends StatelessWidget {
  final String hint;

  const SimpleTextField({Key? key, required this.hint}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(hintText: hint),
    );
  }
}

class SimpleButton extends StatelessWidget {
  const SimpleButton({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: const Text('Submit'),
    );
  }
}