当键盘打开时，如何使用文本字段滚动屏幕获得焦点

Question

我有 flutter 应用程序并创建了表单屏幕来获取用户详细信息。在表单屏幕中，当用户点击文本字段并获得焦点时，键盘打开，需要滚动文本字段，用户希望看到他正在输入的内容。

Answer 1

要在文本字段获得焦点时滚动到文本字段，您需要使用 Scrollable.ensureVisible 方法。这里有一些代码向您展示如何使用它。我希望它有帮助！

问候。

class TextFieldVisibility extends StatefulWidget {
  const TextFieldVisibility({Key? key}) : super(key: key);

  @override
  State<TextFieldVisibility> createState() => TextFieldVisibilityState();
}

class TextFieldVisibilityState extends State<TextFieldVisibility> {
  final _key1 = GlobalKey<State<StatefulWidget>>();
  final _key2 = GlobalKey<State<StatefulWidget>>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Column(
        children: [
          Container(
            color: Colors.orange,
            height: 1000,
          ),
          TextField(
            key: _key1,
            onTap: () {
              ensureVisibleOnTextArea(textfieldKey: _key1);
            },
          ),
          TextField(
            key: _key2,
            onTap: () {
              ensureVisibleOnTextArea(textfieldKey: _key2);
            },
          )
        ],
      ),
    ));
  }

  Future<void> ensureVisibleOnTextArea(
      {required GlobalKey textfieldKey}) async {
    final keyContext = textfieldKey.currentContext;
    if (keyContext != null) {
      await Future.delayed(const Duration(milliseconds: 500)).then(
        (value) => Scrollable.ensureVisible(
          keyContext,
          duration: const Duration(milliseconds: 200),
          curve: Curves.decelerate,
        ),
      );
      // Optional if doesnt work with the first
      // await Future.delayed(const Duration(milliseconds: 500)).then(
      //   (value) => Scrollable.ensureVisible(
      //     keyContext,
      //     duration: const Duration(milliseconds: 200),
      //     curve: Curves.decelerate,
      //   ),
      // );
    }
  }
}