Flutter Focus Watcher 使用指南

Flutter Focus Watcher 是一个用于监听焦点变化的插件，它可以帮助你在用户点击其他地方时自动移除 TextField 的焦点，并且当键盘弹出时会自动调整页面布局以避免输入框被遮挡。以下是该插件的详细使用方法。

功能概述

1. 自动移除焦点：当用户点击屏幕其他位置时，自动移除当前 TextField 的焦点。
2. 键盘弹出处理：当键盘弹出时，自动调整页面布局，防止输入框被键盘遮挡。
3. 自定义偏移量：可以通过设置 liftOffset 来控制页面上移的距离，默认值为 15.0。

使用步骤

1. 添加依赖

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

dependencies:
  flutter_focus_watcher: ^latest_version

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

2. 基本用法

FocusWatcher 必须放在 MaterialApp 或 WidgetsApp 内部，因为它需要从这些组件中获取 MediaQuery。

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return FocusWatcher(
      child: Scaffold(
        resizeToAvoidBottomInset: false, // 关键设置
        appBar: AppBar(
          title: Text(title),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(labelText: 'First Name'),
              ),
              TextField(
                decoration: InputDecoration(labelText: 'Last Name'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 忽略某些 Widget

如果你希望某些 TextField 不受 FocusWatcher 的影响，可以使用 IgnoreFocusWatcher 包裹这些 TextField。

@override
Widget build(BuildContext context) {
  return IgnoreFocusWatcher(
    child: TextField(decoration: InputDecoration(labelText: 'Ignored Field')),
  );
}

4. 强制激活 FocusWatcher

有时某些 TextField 可能不会触发 RenderEditable 或 RenderParagraph，导致 FocusWatcher 无法正常工作。你可以使用 ForceFocusWatcher 来强制激活 FocusWatcher。

@override
Widget build(BuildContext context) {
  return ForceFocusWatcher(
    child: TextField(decoration: InputDecoration(labelText: 'Forced Field')),
  );
}

完整示例 Demo

以下是一个完整的示例，展示了如何使用 FocusWatcher 处理多个 TextField 并忽略某个特定的 TextField。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({required this.title});

  @override
  Widget build(BuildContext context) {
    return FocusWatcher(
      child: Scaffold(
        resizeToAvoidBottomInset: false, // 关键设置
        appBar: AppBar(
          title: Text(title),
        ),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(labelText: 'First Name'),
              ),
              TextField(
                decoration: InputDecoration(labelText: 'Last Name'),
              ),
              SizedBox(height: 20),
              IgnoreFocusWatcher(
                child: TextField(
                  decoration: InputDecoration(labelText: 'Ignored Field'),
                ),
              ),
              SizedBox(height: 20),
              ForceFocusWatcher(
                child: TextField(
                  decoration: InputDecoration(labelText: 'Forced Field'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

通过上述示例，你可以看到如何使用 FocusWatcher 来管理焦点和键盘弹出行为。希望这些信息对你有所帮助！