键盘将内容向上推/调整屏幕大小

Question

编辑：

我得到的报告是这是When the keyboard appears, the Flutter widgets resize. How to prevent this?的副本。尽管这是相关的，但这是一个不同的问题。我希望键盘覆盖UI，直到到达具有焦点的TextField。这是Android上的默认行为

原始：

我是一名Android开发人员，刚开始使用Flutter。我想创建一个登录屏幕。我想要一个高于TextField的图像。所以我想，我使用Stack将图像放在背景上，而在下面TextField上。

问题是，键盘一出现，它就会将所有内容向上推。在Android上，通常只有在必要时才向上推键盘，直到到达EditText为止。

我尝试将resizeToAvoidBottomPadding设置为false，但是（当然）没有任何动作，并且TextField被键盘遮盖了。

我记得过去玩过iOS，这是默认行为，也许我应该重新考虑自己的布局？

此刻，我将其包装在ListView中，以便用户可以在出现键盘时进行滚动。

这是我的布局（仅用于测试）

@override
Widget build(BuildContext context) {
  this.context = context;
  return new Scaffold(
      key: _scaffoldKey,
      body: new Stack(
          children: <Widget>[loginImage(), new Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[new TextField(), new TextField(),
        new TextField(), new TextField(),
        new TextField(), new TextField()],
      )])
  );
}

：

Answer 1

[在autoFocus: true中设置CupertinoTextField()并通过在resizeToAvoidBottomInset: false中设置Scaffold()来解决此问题。

[resizeToAvoidBottomPadding现在已弃用。

使用resizeToAvoidBottomInset。

Answer 2

我认为这可以满足您的需求。最大的问题是您选择使用堆栈。仅当您希望将事物堆叠在一起时才使用堆叠。在这种情况下，您不想要那样。我将其放置在Column中，并用Expanded填充开放空间（此小部件会扩展到可用空间并将所有内容向下推）。我并不是说这是最好的方法（只有2周的颤振经验）。但这是一种方式。希望对您有所帮助！

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Flutter Demo',
            theme: new ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: new Scaffold(
                body: new Column(
                    children: <Widget>[
                        new Center(
                            child: new Container(
                                height: 150.0,
                                width: 75.0,
                                color: Colors.red,
                            ),
                        ),
                        new Expanded(
                            child: new Container(),
                        ),
                        new Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                                new TextField(),
                                new TextField(),
                                new TextField(),
                                new TextField(),
                                new TextField(),
                                new TextField()
                            ],
                        ),
                    ],
                ),
            ),
        );
    }
}

Answer 3

也代替Stack，我建议您使用ListView。另一方面，您也可以尝试SingleChildScrollView（但可能必须添加额外的代码才能实现）。

快乐编码...