Flutter键盘弹出时滚动视图插件flutter_keyboard_scroll的使用

flutter_keyboard_scroll 是一个用于监听键盘弹出的插件。它可以帮助你在键盘弹出时自动调整视图，使输入框不会被键盘遮挡。

开始使用

首先，你需要在你的项目中引入 flutter_keyboard_scroll 插件。你可以在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter_keyboard_scroll: ^1.0.0

然后运行 flutter pub get 来安装插件。

基本用法

你可以使用 KeyboardObserver 来监听键盘的状态，并根据键盘是否弹出来执行相应的操作。例如，当键盘弹出时隐藏当前焦点：

KeyboardObserver(
  hideListener: (double former, double newer, time) {
    FocusScope.of(context).requestFocus(FocusNode());
  },
  child: Column(
    children: [
      _buildScreenShow(),
      _buildTextField(),
    ],
  ),
);

使用键盘滚动控制器

首先，创建一个 KeyboardScrollController 实例：

final KeyboardScrollController _keyboardScrollController = KeyboardScrollController();

接着，添加文本字段包装器：

_keyboardScrollController.addTextFieldWrapper(
  TextFieldWrapper.fromKey(focusNode: _focusNode, focusKey: _globalKey),
);

最后，在你的 ListView 中使用 KeyboardScroll：

KeyboardScroll(
  controller: _keyboardScrollController,
  child: ListView(
    padding: EdgeInsets.fromLTRB(
      0,
      0,
      0,
      MediaQuery.of(context).padding.bottom,
    ),
    children: [
      // 添加你的列表项
    ],
  ),
)

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_keyboard_scroll 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final TextEditingController _textEditingController = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  final KeyboardScrollController _keyboardScrollController = KeyboardScrollController();

  [@override](/user/override)
  void initState() {
    super.initState();
    _keyboardScrollController.addTextFieldWrapper(
      TextFieldWrapper.fromKey(focusNode: _focusNode, focusKey: GlobalKey()),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter_keyboard_scroll 示例'),
      ),
      body: KeyboardObserver(
        hideListener: (double former, double newer, time) {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: KeyboardScroll(
          controller: _keyboardScrollController,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Form(
              key: _formKey,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    controller: _textEditingController,
                    focusNode: _focusNode,
                    decoration: const InputDecoration(
                      labelText: '请输入',
                    ),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return '请输入内容';
                      }
                      return null;
                    },
                  ),
                  const SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {
                      if (_formKey.currentState!.validate()) {
                        // 处理表单提交
                      }
                    },
                    child: const Text('提交'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}