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

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

我在CupertinoTextField() 中设置autoFocus: true 时遇到了这个问题，并通过在Scaffold() 中设置resizeToAvoidBottomInset: false 来修复它。

resizeToAvoidBottomPadding 现已弃用。

使用resizeToAvoidBottomInset。

Answer 2

另外，我建议你使用ListView，而不是Stack。另一方面，您也可以试用SingleChildScrollView（但您可能需要添加额外的代码才能实现）。

快乐编码...

Answer 3

我认为这可以满足您的需求。最大的问题是您选择使用堆栈。仅当您想将事物堆叠在一起时才使用堆栈。在这种情况下，您不希望那样。将它放在一个列中并用扩展填充开放空间（此小部件扩展到可用空间并将所有内容向下推）是我这样做的方式。我并不是说这是最好的方法（只有 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 4

set this on scaffold:

1-resizeToAvoidBottomInset: true,

2-使用堆栈来设置你的背景。

body: Stack(fit: StackFit.expand, children: <Widget>[
          Opacity(
              opacity: 0.5,
              child: Image.asset('lib/assets/images/background3.jpg',
                  fit: BoxFit.cover)),
          Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Header1(),
                SizedBox(
                  height: 10,
                ),
                Tittle("Welcome to Bitetat's live repots"),
                Expanded(
                  child: SingleChildScrollView(
                      physics: AlwaysScrollableScrollPhysics(),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          Container(

///// 3-那里你可以放你的领域

现在您可以享受漂亮的背景，并且您的键盘不会覆盖字段并且还可以滚动。

Answer 5

这是 Flutter 的默认功能。因此，如果您设置resizeToAvoidBottomInset: false，那么您将失去将 UI 组件保持在键盘上方的功能。 在您的应用程序中添加背景图像 更好的方法是这样做：

Container(
  decoration: BoxDecoration(
    color: primaryColor,
    image: DecorationImage(image: AssetImage(AppImages.appBg)),
  ),
  child: SafeArea(
    child: Scaffold(
      backgroundColor: Colors.transparent,
      body: //All Ui code here//
    ),
  ),
),

必须设置Scaffold的backgroundColor: Colors.transparent 否则，您将无法看到您的背景图片。