Question

我的屏幕非常复杂，具有页面浏览和FutureBuilder。在Pagebuilder中，我还有一个TextFormField，当我现在单击文本字段时，键盘会按预期打开。但是它随后隐藏了文本字段和文本字段下方的按钮。我已经在寻找解决方案，我尝试过的事情：

将resizeToAvoidBottomInset设置为true
将外部列或网页浏览放入SingleChildScrollView
在底部添加一些填充（按键盘大小）

还有其他想法吗？

我只有一个脚手架。

Answer 1

您使用什么方法来获取键盘尺寸？最好的方法是添加一个向上填充文本字段的底部填充，您可能还想将表单字段放在您提到的SingleChildScrollView内：

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom + 10

Answer 2

使页面可滚动，并向按钮添加填充，如下所示：

SingleChildScrollView(
   child: Column(
      children: 
         textInput,
         Padding(padding: ..., child: button) 
             ...

这将允许用户在编辑后滚动到该按钮。

另一种解决方案是使按钮浮动-它始终位于键盘上方

    return Stack(
      children: <Widget>[
        Positioned(
          child: SingleChildScrollView(
              child: Column(
                  children: [textInput]
                    ..add(Container(
                      height: 1111, // button heigh, so could scroll underlapping area
                    )))),
        ),
        Positioned(
          child: Align(
            alignment: Alignment.bottomCenter,
            child: button,
          ),
        )
      ],
    );

Answer 3

您尝试过吗？

您应该使用 SingleChildScrollView 包装页面，以便在由于键盘的引入而导致内容超出设备高度时滚动。

部分

1）使用 WidgetsBindingObserver 混合

2）将 scrollController 添加到 SingleChildScrollView

3）使用 didChangeMetrics 监听键盘的存在并根据需要滚动。

class _SignInState extends State<SignIn> with WidgetsBindingObserver{

ScrollController _scrollController = new ScrollController();

void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeMetrics() {
    _scrollController.jumpTo(200); //as per your need
  }

内部脚手架小部件将控制器添加到SingleChildScrollView

  body: SingleChildScrollView(
        controller: _scrollController,
    )

键盘在PageView中隐藏TextField

3 个答案: