SingleChildScrollView 不使用堆棧小部件 Flutter 滾動

Question

在這里，當我在文本字段中鍵入時，鍵盤覆蓋了登錄按鈕。 所以我需要在打字時向下滾動到登錄按鈕。 我嘗試使用 SingleChildScrollView 包裝 LayoutBuilder 並嘗試在 Stack 中使用 Positioned 小部件，但沒有解決我的問題。 我在 SingleChildScrollView 中將物理設置為 AlwaysScrollableScrollPhysics() 但它也沒有解決問題。 我不知道我做錯了什么。 如果有人可以幫助我解決這個問題，我將不勝感激

這是我的代碼

 Material(
  child: SingleChildScrollView(
    child: Stack(
      overflow: Overflow.clip,
      children: <Widget>[
        Image.asset(
          'assets/login-screen-img.jpg'
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(16.0, 220.0, 16.0, 0),
          child: Card(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 24.0),
              child: Form(
                //associating global key with the form(It keeps track of the form)
                key: _formKey, 
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text('Email', style: TextStyle(fontSize: 14.0, color: Colors.grey),),
                    TextFormField(      // email field
                      cursorColor: Colors.brown[500],
                      decoration: InputDecoration(
                        focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.brown[500])
                        ),
                        //hintText: 'Enter your Email'
                      ),
                      // validation
                      validator: (email) => email.isEmpty ? 'Enter the email' : null,
                      onChanged: (emailInput) {
                        setState(() {
                          email = emailInput;
                        });
                      },
                    ),
                    SizedBox(height: 16.0),
                    Text('Password', style: TextStyle(fontSize: 14.0, color: Colors.grey),),
                    TextFormField(      // password field
                      cursorColor: Colors.brown[500],
                      decoration: InputDecoration(
                        //hintText: 'Enter your Password'
                        focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.brown[500])
                        )
                      ),
                      // validation
                      validator: (password) => password.length < 6 ? 'Password must be more than 6 characters' : null,
                      obscureText: true, // hide when type
                      onChanged: (passwordInput) {
                        setState(() {
                          password = passwordInput;
                        });
                      },
                    ),
                    SizedBox(height: 48.0,),
                    Center(
                      child: RaisedButton(  // login button
                        child: Text('LOG IN', style: TextStyle(fontSize: 16.0, color: Colors.white),),
                        color: Colors.brown[500],
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25)
                        ),
                        padding: EdgeInsets.fromLTRB(66.0, 16.0, 66.0, 16.0),
                        onPressed: () async {
                          if(_formKey.currentState.validate()) { 
                            // show loading screen
                            setState(() {
                              loading = true;
                            });
    
                            dynamic result = await _auth.signInWithEmailAndPassword(email, password);
    
                            if(result == null) {
                              // stop showing loading screen/widget
                              setState(() {
                                loading = false;
                              });
    
                              // show an error message
                              Fluttertoast.showToast(
                                msg: 'Could not sign in!',
                                toastLength: Toast.LENGTH_SHORT,
                              );
    
                            }
                            
                          }
                        },
                      ),
                    ),
                    SizedBox(height: 24.0),
                    Center(child: Text('Don\'t have and account ?' )),
                    SizedBox(height: 16.0,),
                    Center(
                      child: FlatButton(   // sign up button
                        child: Text('SIGN UP', style: TextStyle(fontSize: 16.0, color: Colors.brown[500] )),
                        onPressed: (){
                          Navigator.push(context, MaterialPageRoute(
                            builder: (context) => SignUp()
                          ));
                        }, 
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        )
      ],
    ),
  ),
);

我的用戶界面截圖

Answer 1

在這里，我發現問題在於堆棧的高度。 正如評論中提到的@sajithlakmal，堆棧的高度很小，沒有什么可以滾動的。 但就我而言，我不想讓屏幕高度超出屏幕高度，因為這只是一個登錄屏幕。 我可以通過用 Scaffold 替換 Material 小部件來輕松解決這個問題。 Scaffold 主體內部在鍵入時提供所需的高度並能夠向下滾動。

這是工作代碼。

Scaffold(
  body: SingleChildScrollView(
      child: Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          Image.asset(
            'assets/login-screen-img.jpg',
             alignment: Alignment.topCenter,
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(16.0, 220.0, 16.0, 0),
            child: Card(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 24.0),
                child: Form(
                  //associating global key with the form(It keeps track of the form)
                  key: _formKey, 
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Text('Email', style: TextStyle(fontSize: 14.0, color: Colors.grey),),
                      TextFormField(      // email field
                        cursorColor: Colors.brown[500],
                        decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.brown[500])
                          ),
                          //hintText: 'Enter your Email'
                        ),
                        // validation
                        validator: (email) => email.isEmpty ? 'Enter the email' : null,
                        onChanged: (emailInput) {
                          setState(() {
                            email = emailInput;
                          });
                        },
                      ),
                      SizedBox(height: 16.0),
                      Text('Password', style: TextStyle(fontSize: 14.0, color: Colors.grey),),
                      TextFormField(      // password field
                        cursorColor: Colors.brown[500],
                        decoration: InputDecoration(
                          //hintText: 'Enter your Password'
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.brown[500])
                          )
                        ),
                        // validation
                        validator: (password) => password.length < 6 ? 'Password must be more than 6 characters' : null,
                        obscureText: true, // hide when type
                        onChanged: (passwordInput) {
                          setState(() {
                            password = passwordInput;
                          });
                        },
                      ),
                      SizedBox(height: 48.0,),
                      Center(
                        child: RaisedButton(  // login button
                          child: Text('LOG IN', style: TextStyle(fontSize: 16.0, color: Colors.white),),
                          color: Colors.brown[500],
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25)
                          ),
                          padding: EdgeInsets.fromLTRB(66.0, 16.0, 66.0, 16.0),
                          onPressed: () async {
                            if(_formKey.currentState.validate()) { // check validation
                              // show loading screen
                              setState(() {
                                loading = true;
                              });
            
                              dynamic result = await _auth.signInWithEmailAndPassword(email, password);
            
                              if(result == null) {
                                // stop showing loading screen/widget
                                setState(() {
                                  loading = false;
                                });
            
                                // show an error message
                                Fluttertoast.showToast(
                                  msg: 'Could not sign in!',
                                  toastLength: Toast.LENGTH_SHORT,
                                );
            
                              }
                              
                            }
                          },
                        ),
                      ),
                      SizedBox(height: 24.0),
                      Center(child: Text('Don\'t have and account ?' )),
                      SizedBox(height: 16.0,),
                      Center(
                        child: FlatButton(   // sign up button
                          child: Text('SIGN UP', style: TextStyle(fontSize: 16.0, color: Colors.brown[500] )),
                          onPressed: (){
                            Navigator.push(context, MaterialPageRoute(
                              builder: (context) => SignUp()
                            ));
                          }, 
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    ),
);