Question

我是Flutter的新手，在那里我试图创建登录屏幕，但是我无法处理适当的字段滚动。下面是我编写的代码。主要问题是文本字段位于图像上方，当它向上推时不应发生。

 @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Image.asset(
          "assets/ic_login_stack.png",
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          fit: BoxFit.cover,
        ),
        Scaffold(
          key: scaffoldKey,
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0.0,
          ),
          body: Center(
            child: SingleChildScrollView(
              padding: EdgeInsets.only(left: 24.0, right: 24.0),
              child: Column(
                children: <Widget>[
                  SizedBox(height: 55.0),
                  Form(key: formKey, child: _getUIForm()),
                  SizedBox(
                      width: double.infinity,
                      height: 50,
                      child: GestureDetector(
                        child: RaisedButton(
                          child: Text(AppLocalizations.of(context).buttonText,
                              style: TextStyle(
                                  color: Colors.white, fontSize: 18.0)),
                          elevation: 5.0,
                          color: Color(0xffE9446A),
                          //onPressed: _submit,
                          onPressed: () => {
                            /*Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => CompanyWall()
                                )
                            )*/
                            Navigator.pushAndRemoveUntil(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => CompanyWall()),
                                (r) => false)
                          },
                        ),
                      )),
                  SizedBox(height: 20.0),
                  GestureDetector(
                    onTap: () =>
                        Navigator.of(context).pushNamed(ResetPassword.tag),
                    child: Text(
                      AppLocalizations.of(context).forgotPasswordText,
                      style: TextStyle(
                          decoration: TextDecoration.underline,
                          color: Colors.grey[800],
                          fontSize: 16.0),
                    ),
                  ),
                  SizedBox(height: 30.0),
                  GestureDetector(
                    onTap: () =>
                        Navigator.of(context).pushNamed(SignUpScreen.tag),
                    child: Text(AppLocalizations.of(context).signUpFreeText,
                        style: TextStyle(
                            color: Color(0xffE9446A),
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold)),
                  ),
                ],
              ),
            ),
          ),
        )
      ],
    );
  }

  _getUIForm() {
     Multiple Text Form Feild
  }

下面是我在运行代码时获得的输出。如何处理textformfeild应该保留在徽标下方的滚动。

Answer 1

您正在使用一个有2个孩子的堆栈-图像和滚动内容。图片在滚动内容之外，因此滚动时不会改变其位置。

如果您希望图像与内容一起滚动，请更改布局，以使堆栈位于SingleChildScrollView中。最终应该像这样：

Scaffold -> SingleChildScrollView -> Stack -> [Image, Column]

Answer 2

在支架中添加此

return Scaffold(
      resizeToAvoidBottomPadding: false, // <-- add this
);

如何在Flutter中处理登录屏幕滚动？

2 个答案: