Flutter键盘遮挡处理插件never_behind_keyboard的使用

Flutter键盘遮挡处理插件never_behind_keyboard的使用

标题

Flutter键盘遮挡处理插件never_behind_keyboard的使用

内容

使您的输入表单区域及其特定底部不会被弹出键盘遮挡。

此包的目标是在您有一个TextField或TextFormField时，每当它们被聚焦时，不仅需要让它们位于弹出键盘上方，还需要确保它们下方的区域也处于可见状态。

该区域可以是任何内容。

特性

• 提供无需键盘遮挡的输入表单区域
• 支持TextField和TextFormField
• 检测多个焦点源，例如您可以将多个TextField或TextFormField设置为焦点源

限制

• 目前仅支持一个区域的底部作为永不遮挡区域
• 我使用`Scrollable.ensureVisible()`来滚动到目标控件。但有时我发现动画不完全平滑。您可以尝试使用示例项目

开始使用

1. 将此包添加到您的项目，请遵循安装标签中的说明
2. 您已经准备好使用此控件

使用方法

此包有3个控件。

1. NeverBehindKeyboardArea: 您需要设置一个基于滚动视图（ScrollView或ListView）的控件。该控件会识别NeverBehindFocusSource和NeverBehindBottom，并将它们放在其中。
2. NeverBehindFocusSource: 将此控件放在NeverBehindKeyboardArea中，并包裹可聚焦的控件，如TextField或TextFormField。此控件用于检测来自它们的焦点事件并通知NeverBehindKeyboardArea。
3. NeverBehindBottom: 需要将其作为标记控件放置在键盘下方。必须为其分配全局键。

NeverBehindKeyboardArea(
    // 设置一个基于滚动视图（ScrollView或ListView）
    scrollView: ListView(
        children: [
            // 这个例子展示了如果出现弹出键盘，区域会被隐藏。
            const SizedBox(
                height: 400,
            ),
            Column(
                children: [
                    // NeverBehindFocusSource控件将放在NeverBehindKeyboardArea控件中。
                    // 您可以将TextField或TextFormField放在里面，这个控件的目的是检测来自它们的焦点事件并通知NeverBehindKeyboardArea。
                    NeverBehindFocusSource(
                        child: Column(
                            children: [
                                TextField(
                                    decoration: InputDecoration(
                                        hintText: "ex. Google Flutter 2 for beginner",
                                    ),
                                )
                            ],
                        ),
                    ),
                    const SizedBox(
                        height: 70,
                    ),
                    ElevatedButton(
                        onPressed: () {},
                        child: const Text('Simple Sign in Button'),
                    ),
                    const Text("Look like I am not behind the keyboard any more, because there's NeverBehindBottom widget below me :)"),
                    // NeverBehindBottom控件不需要紧挨着或者放在NeverBehindFocusSource控件里面。它只需要放在NeverBehindKeyboardArea控件中。
                    // 在大多数情况下，您需要将其作为标记控件放置在键盘下方。
                    // 请记住给它分配全局键。这很重要。
                    NeverBehindBottom(key: GlobalKey()),
                ],
            ),
        ],
    ),
),

简单版本

NeverBehindKeyboardArea(
    scrollView: ListView(
        children: [
            Column(
                children: [
                    NeverBehindFocusSource(
                        child: TextField()
                    ),
                    ElevatedButton(
                        onPressed: () {},
                        child: const Text('Simple Sign in Button'),
                    ),
                    NeverBehindBottom(key: GlobalKey()),
                ],
            ),
        ],
    ),
),

补充信息

此包受到了akexorcist的GroupFocusable的启发。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_never_behind_keyboard/pages/never_behind_page.dart';
import 'package:flutter_never_behind_keyboard/pages/prototype_page.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Never Behind Keyboard Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return NeverBehindPage();
  }
}