Flutter焦点管理插件unfocuser的使用

功能

当点击文本输入框外的区域时，Unfocuser 会隐藏键盘。

开始使用

• 在你的 pubspec.yaml 文件中添加 unfocuser: ^1.0.0。
• 将父级组件用 Unfocuser 包裹。
  • 通常将 MaterialApp 包裹在 Unfocuser 中效果很好。

使用示例

class MainApp extends StatelessWidget {
  const MainApp({super.key});
@override
Widget build(BuildContext context) {
// 使用 Unfocuser 包裹 MaterialApp
return Unfocuser(
child: MaterialApp(
home: TextFormField(), // 这里可以替换为任何需要焦点管理的 TextFormFields
),
);
}
}

其他信息

原始代码由 Serov Konstantin 编写。所有荣誉归于他们。

完整示例 Demo

以下是一个完整的 Flutter 应用程序示例，展示了如何使用 unfocuser 插件来管理焦点。

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

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

// 定义主应用类
class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用 Unfocuser 包裹 MaterialApp
    return Unfocuser(
      child: MaterialApp(
        title: 'Unfocuser 示例',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Unfocuser 示例页面'),
      ),
    );
  }
}

// 定义主页面类
class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title});

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 文本输入框
            TextFormField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: '请输入内容',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            // 显示输入内容
            Text(
              '输入内容: ${_controller.text}',
              style: TextStyle(fontSize: 18),
            )
          ],
        ),
      ),
    );
  }
}