Question

修改：

我收到一份报告，指出这是When the keyboard appears, the Flutter widgets resize. How to prevent this?的副本。虽然这是相关的，但这是一个不同的问题。我希望键盘与UI重叠，直到它到达具有焦点的TextField。这是Android上的默认行为

原始

我是Android开发人员，刚开始使用Flutter。我想创建一个登录屏幕。我想要一张insert into times(sale_day, day_type) select sale_date , case when to_char(sale_date,'DD-MM') in ( '01-01', '21-01', '18-02', '28-05', '04-07', '03-09', '08-10', '11-11', '22-11', '25-12' ) then 'Holiday' when to_char(sale_date, 'DY', 'nls_date_language = English') like 'S%' then 'Weekend' else 'Weekday' end as day_type from sales;以上的图像。所以我想，我使用TextField将图片放在背景上，然后使用Stack下面的图片。

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

我尝试将EditText设置为false，但之后没有任何动作（当然），resizeToAvoidBottomPadding被键盘覆盖。

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

目前，我将其包裹在TextField中，以便用户能够在键盘出现时滚动。

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

ListView

：

Answer 1

在$this->app中设置autoFocus: true并在CupertinoTextField()中设置resizeToAvoidBottomPadding: false时解决了这个问题。

Answer 2

我认为这可以满足您的需求。最大的问题是你选择使用Stack。仅当您希望将事物堆叠在一起时才使用堆栈。在这种情况下，你不想要那样。将它放置在一个列中并使用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()
                            ],
                        ),
                    ],
                ),
            ),
        );
    }
}

Answer 3

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

快乐编码...

Answer 4

这是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//
    ),
  ),
),

必要设置脚手架的背景颜色：Colors.transparent 否则，您将看不到背景图片。

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

4 个答案: