在屏幕键盘上打开时,让小部件移动到屏幕“上方”

问题描述

我正在尝试使用 Flutter 登录页面。目前看起来是这样的:

Before open keyboard

当我尝试使用屏幕键盘在其中一个文本字段中输入内容时,Flutter 会尝试将我的所有内容向上移动,直到显示“TEST”的图像到达顶部并且底部内容溢出:

After open keyboard

我见过的其他应用允许内容继续在屏幕“上方”移动,并且不会在顶部小部件碰到屏幕顶部时停止。

我知道我可以通过将 resizetoAvoidBottomInset 设置为 false 来禁用脚手架中这些小部件的大小调整和移动,但这看起来并不太好,并且会根据键盘覆盖不同的数量,所以我宁愿不要这样做。

如何让小部件继续向上移动?另外,有没有办法阻止“创建帐户”小部件只像其他小部件一样移动并将其保持在键盘下方?我试过查看 Flutter 的文档,但我真的不知道如何以一种获得有用结果的方式描述这个问题,因为我对 Flutter 还是很陌生。

“创建帐户”按钮固定在屏幕底部自己的列中,其余小部件位于包含另一列的展开小部件中。这两个列都被父列包围。 这是我的小部件树,以防万一:

  @override
  Widget build(BuildContext context) {

    return new WillPopScope(
      onWillPop: () async => false,child: Scaffold(
        backgroundColor: Colors.white,body: Column(children: <Widget>[
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[
                Image.asset(
                  "lib/assets/test.png",height: 20.h,width: 20.h,),SizedBox(height: 10.h),Text(
                  "Login:",style: TextStyle(
                    fontSize: 16.sp,fontWeight: FontWeight.bold,SizedBox(height: 1.5.h),RoundedInputField(
                  editTextBackgroundColor: Colors.blue[300],hintText: "Email:",autoFocus: false,onChanged: (value) {
                    
                  },RoundedPasswordField(
                  editTextBackgroundColor: Colors.blue[300],onSubmitted: (value) {
                    
                  },SizedBox(height: 0.75.h),Text(
                  "$errMsg",style: TextStyle(
                    fontSize: 13.sp,fontWeight: FontWeight.normal,color: Colors.red,RoundedButton(
                  text: "Login!",height: 6.h,color: Colors.blue,textColor: Colors.white,press: () {
                    
                  },],Column(
            mainAxisAlignment: MainAxisAlignment.end,children: <Widget>[
              Align(
                alignment: Alignment.bottomCenter,child: ElevatedButton(
                  style: ElevatedButton.styleFrom(primary: Colors.blue,textStyle: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),fixedSize: Size(100.w,10.h),child: Text("Create Account"),onpressed: () {
                    
                    }
                  },]),);

如果有人可以提供帮助,将不胜感激。

解决方法

你应该用SingleChildScrollView包裹你的身体:

示例:

@override
  Widget build(BuildContext context) {

    return new WillPopScope(
      onWillPop: () async => false,child: Scaffold(
        backgroundColor: Colors.white,body: Container(
        child: SingleChildScrollView(
        child: Column(...)
        ),),);

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...