Flutter SingleChildScrollView小部件将整个容器推到顶部并添加大块白色背景

Question

[当我添加SingleChildScrollView小部件时，整个容器就会上升，并且在屏幕底部显示了一个白色背景的框。我尝试除去包括底部在内的整个填充物，但没有任何改变。我不太确定该怎么办。任何帮助，将不胜感激。 Screenshot of the screen

Widget build(BuildContext context) {

final bottom = MediaQuery.of(context).viewInsets.bottom;
// If we're loading then return the loading screen, otherwise the
// scaffold with the register screen
return loading ? Loading() : Scaffold (
  resizeToAvoidBottomInset: false,
  resizeToAvoidBottomPadding: false,
  body: SingleChildScrollView(
    child: Container (
      padding: EdgeInsets.fromLTRB(60.0, 0, 60, bottom),
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/register_background.png'),
          fit: BoxFit.fill,
        ),
      ),
      child: Form (
        key: _formKey,
        child: Column (
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: MediaQuery.of(context).size.height * 0.04),
            Image.asset('assets/logo.png'),
            SizedBox(height: MediaQuery.of(context).size.height * 0.08),
            Text(
              "Register",
              style: TextStyle (
                fontFamily: 'MuseoSans',
                fontSize: 26.0,
                fontWeight: FontWeight.bold,
                color: Color.fromRGBO(77, 72, 91, 1.0), //#4D485B
              ),
            ),
            SizedBox(height: 12.0),
            TextFormField (
              textAlign: TextAlign.center,
              validator: (val) {
                // Regex checking to see if email is valid
                if (val.isEmpty || !RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(val)) {
                  return 'Enter a valid email address';
                }
                else {
                  return null;
                }
              },
              onChanged: (val) {
                setState(() {
                  email = val;
                });
              },
              cursorColor: Color.fromRGBO(101, 166, 218, 1.0), //#65A6DA
              decoration: textInputDecoration.copyWith(hintText: 'Email'),
            ),
            SizedBox(height: 12.0,),
            TextFormField (
              textAlign: TextAlign.center,
              validator: (val) => val.isEmpty ? 'Field is required' : null,
              onChanged: (val) {
                setState(() {
                  name = val;
                });
              },
              cursorColor: Color.fromRGBO(101, 166, 218, 1.0), //#65A6DA
              decoration: textInputDecoration.copyWith(hintText: 'Username'),
            ),
            SizedBox(height: 12.0,),
            TextFormField (
              textAlign: TextAlign.center,
              validator: (val) {
                if (val.isEmpty) {
                  return 'Field is required';
                }
                else if (val.length < 8) {
                  return 'Password must be at least 8 characters';
                }
                else if (val != confirmPassword) {
                  return 'Passwords must match';
                }
                else {
                  return null;
                }
              },
              onChanged: (val) {
                setState(() {
                  password = val;
                });
              },
              cursorColor: Color.fromRGBO(101, 166, 218, 1.0), //#65A6DA
              obscureText: true,
              decoration: textInputDecoration.copyWith(hintText: 'Password'),
            ),
            SizedBox(height: 12.0,),
            TextFormField (
              textAlign: TextAlign.center,
              validator: (val) {
                if (val.isEmpty) {
                  return 'Field is required';
                }
                else if (val != password) {
                  return 'Passwords must match';
                }
                else {
                  return null;
                }
              },
              onChanged: (val) {
                setState(() {
                  confirmPassword = val;
                });
              },
              cursorColor: Color.fromRGBO(101, 166, 218, 1.0), //#65A6DA
              obscureText: true,
              decoration: textInputDecoration.copyWith(hintText: 'Confirm password'),
            ),
            SizedBox(height: 20.0,),
            ButtonTheme(
              minWidth: 120.0,
              child: RaisedButton (
                onPressed: () async {
                  if(_formKey.currentState.validate()) {
                    // At this point we're checking the database for data
                    setState(() => loading = true);
                    dynamic result = await _auth.registerWithEmailAndPassword(email, password, name);
                    if (result is String) {
                      // Parsing the result to only get the error message
                      String actualError = result.substring(result.indexOf(",") + 1, result.indexOf("."));
                      setState(() {
                        error = actualError;
                        // If there are errors we want to go back to the register screen
                        // so loading is false
                        loading = false;
                      });
                    }
                  }
                },
                child: Text (
                  'Create User',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'MuseoSans',
                    fontSize: 16.0,
                  ),
                ),
                color: Color.fromRGBO(101, 166, 218, 1.0), //#65A6DA
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
            ),
            SizedBox(height: 12.0),
            GestureDetector (
                child: Text (
                    'Already have an account? Sign In',
                    style: TextStyle (
                      color: Color.fromRGBO(101, 166, 218, 1.0), //#65A6DA
                      fontFamily: 'MuseoSans',
                    )
                ),
                onTap: () {
                  widget.toggleView();
                }
            ),
            SizedBox(height: 12.0),
            Text (
              error,
              style: TextStyle (
                color: Color.fromRGBO(238, 107, 107, 1.0), //#EE6B6B
                fontSize: 14.0,
                fontFamily: 'MuseoSans'
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    ),
  ),

);
  }

Answer 1

您只需要使用MediaQuery.of(context).size.height将外部容器的高度设置为等于移动屏幕的大小

return loading ? Loading() : Scaffold (
  resizeToAvoidBottomInset: false,
  resizeToAvoidBottomPadding: false,
  body: SingleChildScrollView(
    child: Container (

      // this will set the outer container size to the height of your screen
      height: MediaQuery.of(context).size.height,

      // Other properties
      child: Form (
       // code
     ),
    ),
  ),
);
}

希望我能解决您的问题，祝您编程愉快！