flutter实现如何 检测键盘的显示和隐藏状态

且听真言2024-12-09 21:35

Flutter 实现检测键盘的显示和隐藏状态。

前置知识点学习

GestureDetector

`GestureDetector` 是 Flutter 中的一个小部件，用于检测用户在屏幕上的手势操作。通过使用 `GestureDetector`，你可以让应用对用户的触摸、拖动、滑动等手势做出响应。这是构建交互式应用程序的关键组件之一。

主要功能

`GestureDetector` 能够检测多种手势，包括：

  • 点击：单击、双击等。
  • 拖动：水平和垂直方向的拖动。
  • 长按：在某个位置按住一段时间。
  • 滑动：快速的滑动手势。
  • 缩放：两个手指的缩放操作。

主要属性

1.`onTap`：

  • 当用户点击屏幕时调用。
  • 用于处理简单的点击事件。

2.`onDoubleTap`：

  • 当用户双击屏幕时调用。
  • 常用于实现双击放大等功能。

3.`onLongPress`：

  • 当用户长按屏幕时调用。
  • 可以用于显示上下文菜单或启动其他长按交互。

4.`onPanUpdate`：

  • 当用户在屏幕上拖动时持续调用。
  • 用于处理拖动事件。

5.`onHorizontalDragUpdate` 和 `onVerticalDragUpdate`：

  • 分别用于处理水平和垂直方向的拖动。

6.`onScaleUpdate`：

  • 当用户执行缩放操作时持续调用。
  • 适用于实现缩放图片等功能。

7.`behavior`：

  • 定义如何命中测试这个小部件。`HitTestBehavior.translucent` 允许点击事件穿透到后面的组件。

代码用例

Dart 复制代码 
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GestureDetector Demo'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              print('Box tapped!');
            },
            onDoubleTap: () {
              print('Box double-tapped!');
            },
            onLongPress: () {
              print('Box long-pressed!');
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: const Center(
                child: Text("Tap me"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

使用场景

  • 按钮交互：可以用来替代 `FlatButton` 或 `IconButton` 实现更复杂的交互。
  • 拖动排序：用于实现诸如拖动排序列表等交互。
  • 手势控制：实现类似于画板中的手势缩放和拖动。

KeyboardDetector

`KeyboardDetector` 是一个用于检测软键盘显示状态的自定义 Flutter 组件。它主要用于判断软键盘是否弹出，并根据键盘的状态变化执行相应的操作。这种功能在需要根据键盘状态调整用户界面的布局或行为的应用程序中非常有用。

组件的主要组成部分

  1. 属性
  • `keyboardShowCallback`：一个回调函数，当键盘状态发生变化时调用。参数为一个布尔值，指示键盘是否显示。
  • `content`：一个 `Widget`，表示需要显示的实际内容。
  1. 状态类 `_KeyboardDetectorState`

继承 `WidgetsBindingObserver`：通过实现这个接口，该组件可以监听窗口尺寸变化事件，例如键盘的弹出或收起。

Dart 复制代码 
class KeyboardDetector extends StatefulWidget {
  final KeyboardShowCallback? keyboardShowCallback;
  final Widget content;
  const KeyboardDetector({super.key, this.keyboardShowCallback, required this.content});
  @override
  _KeyboardDetectorState createState() => _KeyboardDetectorState();
}

构造函数：接受一个可选的 `keyboardShowCallback` 和一个必需的 `content`，用于初始化组件。

构造函数：接受一个可选的 `keyboardShowCallback` 和一个必需的 `content`，用于初始化组件。

Dart 复制代码 
class _KeyboardDetectorState extends State<KeyboardDetector>
    with WidgetsBindingObserver {
  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

`initState`：在组件初始化时调用，添加当前对象为观察者，以便监听窗口尺寸的变化。

Dart 复制代码 
  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        widget.keyboardShowCallback
            ?.call(MediaQuery.viewInsetsOf(context).bottom > 0);
      });
    });
  }

`didChangeMetrics`：每当窗口尺寸发生变化时调用。

  • 使用 `MediaQuery.viewInsetsOf(context).bottom` 检测键盘是否显示（底部插入大于 0 表示键盘显示）。
  • 如果 `keyboardShowCallback` 不为 `null`，则调用它并传递当前键盘状态。
Dart 复制代码 
  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return widget.content;
  }
  • `dispose`：在组件销毁时调用，移除观察者以防止内存泄漏。
  • `build`：返回 `content` 组件，即用户在 `KeyboardDetector` 中提供的实际 UI 内容。

使用场景

  • 动态布局调整：在键盘弹出时调整布局，例如收起底部导航栏或向上移动输入框。
  • 用户输入反馈：在键盘弹出时改变 UI 以提供更好的用户输入体验。
  • 跨平台适应性：在不同设备和输入方式下提供一致的用户体验。

总结

`KeyboardDetector` 是一个实用的工具，可以帮助 Flutter 应用程序响应键盘的显示和隐藏。这种检测使得开发者可以根据键盘状态动态调整应用的界面布局，从而提升用户体验。通过这种方式，应用程序能够更好地适应不同设备上的用户交互习惯。

FocusScope.of(context).requestFocus(FocusNode())

`FocusScope.of(context).requestFocus(FocusNode())` 是 Flutter 中用于管理键盘焦点的一个方法调用。这个方法主要用于控制哪个组件（通常是输入框）应该接收键盘输入焦点，以及如何在组件之间切换焦点。

代码解析

`FocusScope.of(context)`:
  • `FocusScope` 是一个管理多个 `FocusNode` 的类，通常用于协调多个可聚焦组件的焦点状态。
  • `of(context)` 是一个静态方法，用于从当前 `BuildContext` 中获取最近的 `FocusScopeNode`。这通常用于在当前视图树中找到焦点管理器。
`requestFocus(FocusNode())`:
  • `requestFocus` 是 `FocusScopeNode` 的一个方法，用于请求将焦点设置到指定的 `FocusNode`。
  • 传入的 `FocusNode()` 是一个新的 `FocusNode` 实例，表示一个没有附加到任何具体控件上的焦点节点。

实际效果

调用 `FocusScope.of(context).requestFocus(FocusNode())` 实际上是清除当前焦点，即将焦点从当前聚焦的组件（如 `TextField`）移除。因为传入的是一个新的、未附加到任何具体控件的 `FocusNode`，所以没有任何组件会获得焦点。这通常用于关闭键盘。当用户触摸非输入区域时，应用程序可以调用这段代码来收起键盘。

使用场景

  • 关闭键盘：在用户点击屏幕上的非输入区域时，一般会希望键盘关闭。通过调用 `requestFocus` 并传入一个新的 `FocusNode`，可以实现这一点。
  • 焦点管理：在复杂表单中，可以使用 `FocusScope` 和 `FocusNode` 来手动控制焦点的转移。例如，从一个输入框切换到下一个。

示例

以下是一个简单的示例，展示如何使用这段代码来关闭键盘：

Dart 复制代码 
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Focus Example")),
        body: GestureDetector(
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: const Center(
            child: TextField(
              decoration: InputDecoration(hintText: "Tap outside to close keyboard"),
            ),
          ),
        ),
      ),
    );
  }
}

总结

`FocusScope.of(context).requestFocus(FocusNode())` 是一个强大的工具，用于管理应用程序中不同组件的焦点状态。通过适当的使用，可以显著改善用户在表单和输入字段中的体验，尤其是在移动设备上。这一方法的使用能够帮助开发者创建更加流畅和自然的用户交互。

Column

`Column` 是 Flutter 中的一个常用布局小部件，用于垂直排列其子小部件。它的作用类似于 HTML 中的垂直堆叠布局，可以方便地在屏幕上显示多个小部件，并控制它们的排列方式和布局特性。

主要属性

1.`children`：

  • 一个小部件列表，表示需要在 `Column` 中垂直排列的子组件。
  • 例如：`children: [Text('Hello'), Text('World')]`

2.`mainAxisAlignment`：

控制子组件在主轴（垂直方向）上的排列方式。

常用值包括：

  • `MainAxisAlignment.start`：从顶部开始排列。
  • `MainAxisAlignment.end`：从底部开始排列。
  • `MainAxisAlignment.center`：在中间排列。
  • `MainAxisAlignment.spaceBetween`：在子组件之间平均分布空间。
  • `MainAxisAlignment.spaceAround`：在子组件之间和两端分布等间距。
  • `MainAxisAlignment.spaceEvenly`：在子组件之间和两端分布等量的空间。

3.`crossAxisAlignment`：

控制子组件在交叉轴（水平方向）上的对齐方式。

常用值包括：

  • `CrossAxisAlignment.start`：从左侧开始对齐。
  • `CrossAxisAlignment.end`：从右侧开始对齐。
  • `CrossAxisAlignment.center`：居中对齐。
  • `CrossAxisAlignment.stretch`：拉伸子组件以填满交叉轴。

4.`mainAxisSize`：

  • 确定 `Column` 在主轴（垂直方向）上的大小。
  • `MainAxisSize.max`：占满整个可用高度。
  • `MainAxisSize.min`：根据子组件的总高度占用最小空间。

5.`verticalDirection`：

  • 确定子组件的垂直布局顺序。
  • `VerticalDirection.down`：从上到下排列。
  • `VerticalDirection.up`：从下到上排列。

6.`textDirection`：

  • 控制子组件在交叉轴上的布局方向，通常用于处理从左到右（LTR）或从右到左（RTL）的文本布局。

示例代码

以下是一个简单的 `Column` 用法示例：

Dart 复制代码 
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Column Example')),
        body: const Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('First'),
            Text('Second'),
            Text('Third'),
          ],
        ),
      ),
    );
  }
}

使用场景

使用 `Column` 的场景非常广泛，以下是一些常见的使用场景以及如何有效利用 `Column` 来构建应用界面：

1.垂直列表：

  • `Column` 非常适合用于创建垂直排列的视图列表，例如菜单、按钮组、表单字段等。
  • 在这些情况下，可以结合 `ListView` 或 `SingleChildScrollView` 来实现可滚动的垂直列表。

2.表单布局：

  • 在表单中，`Column` 可以用来垂直堆叠各种输入字段、标签和按钮，创建整齐的表单布局。
  • 可以使用 `Padding` 或 `SizedBox` 在字段之间添加空隙，以改善视觉效果。

3.页面布局：

  • 使用 `Column` 可以轻松地将页面内容分成多个垂直部分，如头部、中间内容和底部操作按钮。
  • 可以结合 `Flexible` 和 `Expanded` 小部件调整每个部分的空间占用。

4.对话框和弹出窗口：

在创建需要垂直排列内容的对话框或弹出窗口时，`Column` 提供了简单且直观的布局方式。

设计注意事项

  • 性能：如果 `Column` 中的子组件数量较多，可能会影响性能。在这种情况下，可以考虑使用 `ListView` 来实现可滚动的列表。
  • 布局限制：`Column` 不会自动滚动，因此当内容超出屏幕时，可能需要将其包裹在 `SingleChildScrollView` 中。
  • 嵌套布局：在复杂布局中，`Column` 可以与其他布局小部件（如 `Row`、`Stack`）结合使用，以创建更复杂的界面。

进一步示例

以下是一个更复杂的示例，展示如何使用 `Column` 与其他小部件结合来构建一个布局：

Dart 复制代码 
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Complex Column Layout')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              padding: const EdgeInsets.all(16.0),
              color: Colors.blue,
              child: const Text('Header',
                  style: TextStyle(color: Colors.white, fontSize: 20)),
            ),
            const Expanded(
                child: Center(
              child: Text('Main Content Area'),
            )),
            Container(
              padding: const EdgeInsets.all(16.0),
              color: Colors.green,
              child: const Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Icon(Icons.home, color: Colors.white),
                  Icon(Icons.search, color: Colors.white),
                  Icon(Icons.settings, color: Colors.white),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

代码解析

  • `mainAxisAlignment: MainAxisAlignment.spaceBetween`：`Column` 中的子组件在垂直方向上平均分布空间。
  • `crossAxisAlignment: CrossAxisAlignment.stretch`：子组件在水平方向上拉伸以填满父容器的宽度。
  • `Expanded`：用于让中间的主要内容区域占据剩余的空间。

Expanded

`Expanded` 是 Flutter 中的一个布局小部件，用于在 `Row`、`Column` 或 `Flex` 布局中扩展其子组件，以填充可用空间。`Expanded` 小部件是构建响应式布局的关键工具，能够动态调整子组件的大小以适应父容器的大小变化。

主要功能

填充可用空间：

  • `Expanded` 会让子组件在主轴方向（水平或垂直）占据尽可能多的可用空间。
  • 多个 `Expanded` 小部件可以共享空间，它们的空间分配比例由 `flex` 属性决定。

灵活布局：

  • 通过结合使用 `Expanded` 和 `flex` 属性，可以在复杂布局中实现灵活的空间分配。

主要属性

child`：

  • `Expanded` 小部件的子组件。
  • 这个子组件会被拉伸以填满可用空间。

`flex`：

  • 一个整数值，决定 `Expanded` 子组件占用的空间比例。
  • 默认值为 `1`。多个 `Expanded` 小部件可以根据 `flex` 的值来共享可用空间。

示例代码

以下是一个简单的示例，展示 `Expanded` 的基本用法：

Dart 复制代码 
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Expanded Example')),
        body: Column(
          children: [
            Container(
              height: 100,
              color: Colors.red,
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.green,
                child: const Center(
                    child:
                        Text('Expanded\nflex: 2', textAlign: TextAlign.center)),
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.blue,
                child: const Center(
                    child:
                        Text('Expanded\nflex: 1', textAlign: TextAlign.center)),
              ),
            )
          ],
        ),
      ),
    );
  }
}

代码解析

`Column`：

  • 包含三个子元素，其中两个是 `Expanded` 小部件。

第一个 `Container`：

  • 高度固定为 100 像素。

第一个 `Expanded`：

  • `flex: 2`，表示它会占用两倍于第二个 `Expanded` 的可用空间。

第二个 `Expanded`：

  • `flex: 1`，表示它占用的空间是第一个 `Expanded` 的一半。

使用场景

响应式布局：

  • 在需要根据屏幕大小动态调整组件大小时，`Expanded` 非常有用。

比例分配：

  • 在需要根据特定比例分配空间的布局中，比如仪表盘、统计图表等。

填充剩余空间：

  • 当容器中某些组件的大小固定，而另一些需要填充剩余空间时，可以使用 `Expanded`。

总结

`Expanded` 是一个非常强大的 Flutter 小部件，允许开发者构建灵活和响应式的用户界面。通过合理利用 `Expanded` 和 `flex` 属性，开发者可以轻松地在父容器中分配子组件的空间，从而实现复杂的布局需求。

TextField

`TextField` 是 Flutter 中用于接收用户输入的基本控件之一。它允许用户在应用程序中输入和编辑文本。`TextField` 是构建表单和输入界面的核心组件，提供了丰富的自定义选项以适应各种需求。

主要属性

`controller`：

  • `TextEditingController` 的实例，用于控制和监听 `TextField` 的文本。
  • 可以用来获取输入框的当前文本、设置文本、以及监听文本变化。

`focusNode`：

  • 管理 `TextField` 的焦点状态。
  • 可以用于控制何时获取或失去焦点。

`decoration`：

  • 定制 `TextField` 的外观，如提示文本、标签、边框等。
  • 使用 `InputDecoration` 类来定义。

`keyboardType`：

  • 指定用于输入的键盘类型（如文本、数字、电子邮件等）。
  • 例如：`TextInputType.text`, `TextInputType.number`, `TextInputType.emailAddress`。

`obscureText`：

  • 如果设置为 `true`，则 `TextField` 会隐藏输入内容，常用于密码输入。

`onChanged`：

  • 在文本内容改变时调用的回调函数。
  • 用于实时监听用户输入。

`onSubmitted`：

  • 当用户提交输入（如按下回车键）时调用的回调函数。

`textAlign`：

  • 控制文本在输入框中的对齐方式。
  • 例如：`TextAlign.left`, `TextAlign.center`, `TextAlign.right`。

`style`：

  • 设置文本的样式，包括字体大小、颜色、粗细等。

`maxLines` 和 `minLines`：

  • 控制 `TextField` 的行数，可以用来创建多行输入框。

示例代码

以下是一个简单的 `TextField` 示例：

Dart 复制代码 
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TextField Example')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: TextField(
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'Enter your name',
            hintText: 'John Doe',
          ),
          keyboardType: TextInputType.text,
          onChanged: (value) {
            print('Current text: $value');
          },
          onSubmitted: (value) {
            print('Submitted text: $value');
          },
        ),
      ),
    );
  }
}

代码解析

`InputDecoration`：

  • `labelText`：在输入框上方显示的标签。
  • `hintText`：输入框中显示的提示文本。
  • `border`：定义输入框的边框样式。

`keyboardType`：

  • 设置为 `TextInputType.text`，表示普通文本输入。

`onChanged` 与 `onSubmitted`：

  • `onChanged` 回调在文本每次变化时被调用。
  • `onSubmitted` 回调在用户提交输入时被调用。

Flutter 实现检测键盘的显示和隐藏状态代码学习

Dart 复制代码 
import 'package:flutter/material.dart';


class KeyBoardDemoPage extends StatefulWidget {
  const KeyBoardDemoPage({super.key});

  @override
  _KeyBoardDemoPageState createState() => _KeyBoardDemoPageState();
}

class _KeyBoardDemoPageState extends State<KeyBoardDemoPage> {
  bool isKeyboardShowing = false;

  final FocusNode _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return KeyboardDetector(
      keyboardShowCallback: (isKeyboardShowing) {
        setState(() {
          this.isKeyboardShowing = isKeyboardShowing;
        });
      },
      content: Scaffold(
        appBar: AppBar(
          title: const Text("KeyBoardDemoPage"),
        ),
        body: GestureDetector(
          behavior: HitTestBehavior.translucent,
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    isKeyboardShowing ? "键盘弹起" : "键盘未弹起",
                    style: TextStyle(
                        color: isKeyboardShowing
                            ? Colors.redAccent
                            : Colors.greenAccent),
                  ),
                ),
              ),
              Expanded(
                child: Center(
                  child: TextButton(
                    onPressed: () {
                      if (!isKeyboardShowing) {
                        FocusScope.of(context).requestFocus(_focusNode);
                      }
                    },
                    child: const Text("弹出键盘"),
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: Container(
                  margin: const EdgeInsets.symmetric(horizontal: 10),
                  child: TextField(
                    focusNode: _focusNode,
                    maxLines: 7,
                    minLines: 1,
                    decoration:
                        const InputDecoration(border: OutlineInputBorder()),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

typedef KeyboardShowCallback = void Function(bool isKeyboardShowing);


class KeyboardDetector extends StatefulWidget {
  final KeyboardShowCallback? keyboardShowCallback;

  final Widget content;

  const KeyboardDetector({super.key, this.keyboardShowCallback, required this.content});

  @override
  _KeyboardDetectorState createState() => _KeyboardDetectorState();
}

class _KeyboardDetectorState extends State<KeyboardDetector>
    with WidgetsBindingObserver {
  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        widget.keyboardShowCallback
            ?.call(MediaQuery.viewInsetsOf(context).bottom > 0);
      });
    });
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return widget.content;
  }
}
相关推荐
hudawei9963 个月前
flutter widget 设置GestureDetector点击无效
flutter·gesturedetector·点击事件
qq_289093871 年前
android 手机主界面侧滑退出app问题
android·kotlin·手势·gesturedetector
BruceGerGer1 年前
flutter开发实战-WidgetsBinding监听页面前台后台退出状态
flutter·后台·widgetsbinding·前台·background
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程