当我添加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,
),
],
),
),
),
),
);
}
最佳答案
您只需要使用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
),
),
),
);
}
希望我能解决您的问题快乐编码!
关于flutter - Flutter SingleChildScrollView小部件将整个容器推到顶部，并添加了一 block 白色背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59923566/