flutter如何将键盘收起，输入框失去焦点

在 Flutter 中，当你想要让输入框失去焦点并自动隐藏键盘时，可以使用 `FocusNode` 和 `TextField` 的一些特性配合。首先，你需要为 `TextField` 绑定一个 `FocusNode`，然后当需要键盘消失时，你可以调用 `FocusNode` 的 `unfocus()` 或者通过处理 `GlobalKey` 来控制。

以下是一个简单的示例：

// 创建一个 FocusNode
final focusNode = FocusNode();

// 使用 FocusNode 配置 TextField
TextField(
  controller: TextEditingController(),
  focusNode: focusNode,
  decoration: InputDecoration(...),
  on blur: () {
    // 当输入框失去焦点时，调用 unfocus() 来隐藏键盘
    focusNode.unfocus();
  },
)

// 或者使用 GlobalKey
final key = GlobalKey<FormState>();
...

TextFormField(
  key: key,
  ...
)

// 然后在适当的地方手动调用 blur()
key.currentState!.blur();

相关问题

flutter 软键盘弹起布局

在Flutter中，可以通过使用`WidgetsBinding`来监听软键盘的弹起和收起事件，同时使用`SingleChildScrollView`来为布局进行滚动以适应软键盘的高度。

要实现软键盘弹起布局，可以按照以下步骤进行：

1. 导入必要的包：

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

2. 创建一个`StatefulWidget`，该组件将包含你的布局：

class MyLayout extends StatefulWidget {
  @override
  _MyLayoutState createState() => _MyLayoutState();
}

class _MyLayoutState extends State<MyLayout> {
  // 声明一个控制器来获取文本输入框的焦点
  final FocusNode _focusNode = FocusNode();

  // 监听软键盘状态
  @override
  void initState() {
    super.initState();
    // 在布局构建完成后开始监听软键盘事件
    SchedulerBinding.instance.addPostFrameCallback((_) {
      _focusNode.addListener(() {
        if (_focusNode.hasFocus) {
          // 获取焦点时，键盘弹起
          _scrollToBottom();
        }
      });
    });
  }

  // 滚动到底部
  void _scrollToBottom() {
    SchedulerBinding.instance.addPostFrameCallback((_) {
      Scrollable.ensureVisible(
        _focusNode.currentContext!,
        duration: const Duration(milliseconds: 300),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter软键盘弹起布局'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            // your content here
            TextFormField(
              focusNode: _focusNode, // 将焦点设置给文本输入框
              decoration: InputDecoration(
                labelText: '文本输入框',
              ),
            ),
            // more widgets...
          ],
        ),
      ),
    );
  }
}

3. 在Flutter应用的入口处使用该布局：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyLayout(),
    );
  }
}

通过以上步骤，可以实现一个监听软键盘弹起的布局。当文本输入框获得焦点时，布局可以自动滚动到底部以适应软键盘的高度。