Question

我需要在聚焦文本字段时滚动页面。
所以我用了scroll_to_index插件（https://pub.dev/packages/scroll_to_index）。
但是它只有在已经打开键盘的情况下才能很好地运行。
如果在未打开键盘的情况下点击文本字段，则不会滚动页面。我认为是因为在打开键盘之前先滚动页面。

在我看来，该问题似乎是由于代码以这种方式工作而引起的。

1。点击一个文本字段（链接的Focusnode具有Focus）
2.它尝试将页面滚动到目标。但是因为现在还没有打开键盘，所以目标已经在视野中。所以好像什么也没发生。
3.打开键盘，然后隐藏内容。

auto_scroll.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

class MyCustomScrollView extends StatefulWidget {
  @override
  _MyCustomScrollViewState createState() => _MyCustomScrollViewState();
}

class _MyCustomScrollViewState extends State<MyCustomScrollView> {

  AutoScrollController _autoScrollController = new AutoScrollController();
  List<FocusNode> nodes = List<FocusNode>.generate(3, (index) => FocusNode());

  Future _scrollToIndex(int index) async {
    await _autoScrollController.scrollToIndex(index,
        preferPosition: AutoScrollPosition.end);
  }

  @override
  void initState() {
    super.initState();
    for(var i  =0;i<3;i++) {
      nodes[i].addListener(() {
        if(nodes[i].hasFocus) _scrollToIndex(i);
      });
    }
  }  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: CustomScrollView(
        controller: _autoScrollController,
    slivers: [
      SliverToBoxAdapter(
        child: Container(
          child: Column(
            children: [
              SizedBox(height: 100),
              CupertinoTextField(
                focusNode: nodes[0],
                onEditingComplete: (){
                  FocusScope.of(context).requestFocus(nodes[1]);
                },
              ),
              AutoScrollTag(
                key: ValueKey(0),
                controller: _autoScrollController,
                index: 0,
                child: Container(height: 300, color : Colors.green)
              ),
              CupertinoTextField(
                focusNode: nodes[1],
                onEditingComplete: (){
                  FocusScope.of(context).requestFocus(nodes[2]);
                },
              ),
              AutoScrollTag(
                  key: ValueKey(1),
                  controller: _autoScrollController,
                  index: 1,
                  child: Container(
                    height: 300,
                    color : Colors.green,
                    child: Center(
                      child: Text("Here should be visible!!!!"),
                    ),
                  )
              ),
              CupertinoTextField(
                focusNode: nodes[2],
              ),
              AutoScrollTag(
                  key: ValueKey(2),
                  controller: _autoScrollController,
                  index: 2,
                  child: Container(height: 300, color : Colors.green)
              ),
            ],
          ),
        )
      )
    ],
  ),
    );
    }
}

这是代码。当我点击第二个文本字段时，它应该滚动以显示第二个文本字段下方的所有红色容器，但是没有。但是，当键盘抬起时，可以根据需要单击第二个文本字段。

点击第二个文本字段时的预期结果

实际发生的情况

我知道仅将焦点放在文本字段就足以滚动到文本字段。但是在我的应用程序中，我在键盘上方有一个位置栏，因此我遇到了一个位置栏覆盖文本字段的情况。这就是为什么我使用scroll_to_index。

所以我要做的是等待键盘启动，然后在键盘启动时运行_scrollToIndex函数。如何等待直到键盘打开？或对此问题有什么好的解决方案？谢谢您的阅读。

Answer 1

您可以使用flutter_keyboard_visibility。有两种实现方式：with provider和with listener。

如何等待直到颤抖地打开键盘？

1 个答案: