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

Posted 2023-02-23

【中文标题】键盘将内容向上推/调整屏幕大小

【英文标题】：Keyboard pushes the content up / resizes the screen

【发布时间】：2018-09-25 04:13:05

【问题描述】：

编辑：

我收到报告说这是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()],
      )])
  );

:

【问题讨论】：

这是一个相关的 *** 问题顺便说一句：***.com/questions/46551268/…

When the keyboard appears, the Flutter widgets resize. How to prevent this?的可能重复

我在评论中提到了相同的内容，但不同的是我的问题是关于 TextField 焦点

您的树中是否同时有多个脚手架？

不，这就是全部

【参考方案1】：

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

resizeToAvoidBottomPadding 现已弃用。

使用resizeToAvoidBottomInset。

【讨论】：

使用resizeToAvoidBottomInset : false，resizeToAvoidBottomPadding就是deprecated。

我试过resizeToAvoidBottomInset: false 但现在键盘的autoFocus: true 不起作用

这会导致我正在使用的视图全屏显示，然后又回到原来的大小

【参考方案2】：

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

快乐编码...

【参考方案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()
                            ],
                        ),
                    ],
                ),
            ),
        );
    

【讨论】：

这给了我同样的问题。但我真的很高兴你向我解释了“扩展”！我遇到了将列放在底部的问题。但我实际上要解决的问题是键盘将所有文本字段向上推，而我希望键盘与未聚焦的文本字段重叠

您只希望活动（焦点）文本字段随键盘向上移动？我不知道该怎么做。对不起。仍然很高兴我能在扩展课程上帮助你。

似乎是一个已知问题：github.com/flutter/flutter/issues/13475

【参考方案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-那里你可以放你的领域

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

【参考方案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 否则，您将无法看到您的背景图片。