Flutter ：启用文本字段时，背景图像向上移动。 “resizeToAvoidBottomInset”禁用滚动。我哪里错了？

Posted 2023-02-23

【中文标题】Flutter ：启用文本字段时，背景图像向上移动。 “resizeToAvoidBottomInset”禁用滚动。我哪里错了？

【英文标题】：Flutter : When textfield is enabled, background image moves upward. "resizeToAvoidBottomInset" disables scrolling. Where am I going wrong?

【发布时间】：2020-09-30 23:54:15

【问题描述】：

我的登录屏幕有一个背景图片。当用户点击文本框时，容器必须向上移动，这样文本框/按钮才不会隐藏在键盘下方。

下面是我的代码，它工作正常。但是当启用文本字段时，背景图像只会向上移动。

    class _SignInState extends State<SignIn> 
      TextEditingController usernameController = TextEditingController();
      TextEditingController passwordController = TextEditingController();

      @override
      Widget build(BuildContext context) 
        return Scaffold(
          //resizeToAvoidBottomInset: false,
          body: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,

            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/bg.png'),
                fit: BoxFit.cover,
            )),

            child: SingleChildScrollView(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch, 
                children: <Widget>[

                  --- added username & password textfield ---
                  --- added submit and forgot password buttons ----

为了避免这种情况，我添加了：

    resizeToAvoidBottomInset: false,

作为“脚手架”的属性。现在滚动停止工作。

我哪里错了？

【参考方案1】：

用容器包裹脚手架，添加Boxdecoration（可以在其中添加背景图片）并使脚手架的背景颜色透明。

    class _SignInState extends State<SignIn> 
     TextEditingController usernameController = TextEditingController();
     TextEditingController passwordController = TextEditingController();

     @override
     Widget build(BuildContext context) 
      return Container(
       width: MediaQuery.of(context).size.width,
       height: MediaQuery.of(context).size.height,

       decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/bg.png'),
            fit: BoxFit.cover,
       )),

       child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Container(
         width: MediaQuery.of(context).size.width,
         height: MediaQuery.of(context).size.height,
         child: SingleChildScrollView(
             --- rest of the code ---