13

编辑：

我收到报告说这是当键盘出现时，颤振小部件调整大小的副本。如何防止这种情况？. 虽然这是相关的，但这是一个不同的问题。我希望键盘与 UI 重叠，直到它到达具有焦点的 TextField。这是 Android 上的默认行为

原来的：

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

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

我尝试设置resizeToAvoidBottomPadding为 false，但随后没有任何动作（当然）并且TextField' 被键盘覆盖。

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

目前，我将它包装在 aListView中，以便用户能够在键盘出现时滚动。

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

@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()],
      )])
  );
}

在此处输入图像描述： 在此处输入图像描述

4

5 回答 5

36

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

resizeToAvoidBottomPadding现在已弃用。

使用resizeToAvoidBottomInset.

于 2018-12-27T19:19:21.817 回答
3

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

快乐的编码...

于 2019-02-17T21:31:53.983 回答
2

我认为这可以满足您的要求。最大的问题是您选择使用堆栈。仅当您想将事物堆叠在一起时才使用堆栈。在这种情况下，您不希望那样。将它放在一个列中并用 Expanded 填充开放空间（此 Widget 扩展到可用空间并将所有内容向下推）是我这样做的方式。我并不是说这是最好的方法（只有 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()
                            ],
                        ),
                    ],
                ),
            ),
        );
    }
}
于 2018-04-15T09:22:53.330 回答
1 
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-那里你可以把你的领域

现在你可以享受漂亮的背景，你的键盘不会覆盖这些领域并且也可以滚动。

于 2021-09-06T11:18:13.483 回答
0

这是 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 否则，您将无法看到您的背景图像。

于 2020-06-07T12:43:35.367 回答