flutter - 如何处理 Flutter 中的登录屏幕滚动？

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 应保持在 Logo 下方的滚动。

Answer 1

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

如果您希望图像随内容一起滚动，请更改您的布局，使您的 Stack 位于 SingleChildScrollView 内。它应该大致像这样结束:

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