Question

在Android版本中，当你开始在字段中输入时，Flutter TextEditingController不像默认文本字段那样在键盘上方滚动。我试图查看flutter示例目录中提供的示例应用程序，但即使没有具有此类行为的TextEditController示例。

有没有办法实现这个。

提前致谢。

Answer 1

Flutter默认没有这样的东西。

在ListView中添加TextField。创建ScrollController并将其分配给ListView的控制器。

选择TextField时，使用以下方式滚动ListView：

controller.jumpTo(value);

或者如果你想要滚动动画：

controller.animateTo(offset, duration: null, curve: null);

编辑：当然，持续时间和曲线不会为空。我只是复制并粘贴在这里。

Answer 2

这是尝试提供一个完整的答案，其中包含有关如何从this StackOverflow post检测焦点的信息以及如何从Arnold Parge滚动的信息。

我只使用Flutter几天，所以这可能不是如何创建页面或输入小部件的最佳示例。

另一篇文章中提供的link to the gist看起来也是一个更强大的解决方案，但我还没有尝试过。下面的代码肯定适用于我的小型测试项目。

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  @override createState() => new MyPageState();
}

class MyPageState extends State<MyPage> {
  ScrollController _scroll;
  FocusNode _focus = new FocusNode();

  @override void initState() {
    super.initState();
    _scroll = new ScrollController();
    _focus.addListener(() {
      _scroll.jumpTo(-1.0);
    });
  }

  @override Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Some Page Title'),
      ),
      body: new DropdownButtonHideUnderline(
        child: new SafeArea(
          top: false,
          bottom: false,
          child: new ListView(
            controller: _scroll,
            padding: const EdgeInsets.all(16.0),
            children: <Widget>[

              // ... several other input widgets which force the TextField lower down the page ...

              new TextField(
                decoration: const InputDecoration(labelText: 'The label'),
                focusNode: _focus,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

谢谢大家@ user2785693指出正确方向的有用答案我在这里找到了完整的工作方案 here

仅使用scroll或focusNode.listner的问题是，它仅在我第一次关注文本框时才有效，但是如果我最小化键盘并再次单击已经具有焦点的同一文本框，则列表器回调是没有触发，所以自动滚动代码没有运行。解决方法是将“WidgetsBindingObserver”添加到状态类并覆盖“didChangeMetrics”函数。

希望这有助于其他人使Flutter表单更加用户友好。

Answer 4

那么简单

如果您的文本字段介于5-10个字段之间

constructor(props) {
        super();
        this.func = props.proc;
    }

Flutter TextEditingController不会在键盘上方滚动

4 个答案: