用 SingleChildScrollView 小部件包装我的 Column 小部件后,我的屏幕被剪切成这样:
我找不到填充最大高度或其他东西作为 SingleChildScrolledView 的参数。添加 SingleChild 的原因是因为当我打开 TextField 小部件并弹出键盘时,最后一个 TextField 说它“溢出”,作为解决方案,我发现应该添加 TextField。提前致谢 :)
class _RegisterScreenState extends State<RegisterScreen> {
// TextFields controllers
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _confirmPasswordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.fromLTRB(36, 0, 36, 0),
width: double.infinity,
color: const Color(0xFF26243C),
child: SingleChildScrollView(
reverse: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 72),
const Text("Get Started",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Chalet',
fontSize: 48,
fontWeight: FontWeight.w100,
color: Color(0xFFDF862D),
height: 1.0
),),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('Already have an account?',
textAlign: TextAlign.center,
style: TextStyle(color: Color(0xFFF6F9F8))),
TextButton(
onPressed: () {
// take you to login page
Navigator.push(context, MaterialPageRoute(builder: (context) => const RegisterScreen()));
},
child: const Text(
'Sign In!',
style: TextStyle(
color: Color(0xFFF6F9F8), fontWeight: FontWeight.bold)
))
],
),
const SizedBox(height: 65),
const Text("Your e-mail",
style: TextStyle(
fontSize: 16,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Color(0xFFF6F9F8)
),),
const SizedBox(height: 12),
// email textField
SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
child: TextField(
controller: _emailController,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF6F9F8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none
),
hintText: 'Enter your e-mail',
hintStyle: const TextStyle(
color:Color.fromARGB(255, 174, 173, 173)
)
),
),
),
const SizedBox(height: 12),
const Text("Your password",
style: TextStyle(
fontSize: 16,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Color(0xFFF6F9F8)
),),
const SizedBox(height: 12),
// password textField
SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
child: TextField(
controller: _passwordController,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF6F9F8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none
),
hintText: 'Enter your password',
hintStyle: const TextStyle(
color:Color.fromARGB(255, 174, 173, 173)
)
),
),
),
const SizedBox(height: 12),
const Text("Confirm your password",
style: TextStyle(
fontSize: 16,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Color(0xFFF6F9F8)
),),
const SizedBox(height: 12),
// confirm password textField
SizedBox(
width: MediaQuery.of(context).size.width * 0.85,
child: TextField(
controller: _confirmPasswordController,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF6F9F8),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none
),
hintText: 'Confirm your password',
hintStyle: const TextStyle(
color:Color.fromARGB(255, 174, 173, 173)
)
),
),
),
],
),
),
),
);
}
}
将 BoxConstrains.expand() 添加到我的容器约束后,发生了这种情况:
Scaffold(
body: Container(
// ...
constraints: BoxConstraints.expand(), // Added this
child: SingleChildScrollView(
// ...
),
),
)
包裹
Container
的SingleChildScrollView
被限制为匹配其子级请求的高度。为了使其Container
子扩展至身体Scaffold
,使用constraints: BoxConstraints.expand()
。另请参阅:了解约束
编辑:您还进行了
reverse: true
设置,这会反转滚动方向并导致剩余空间填满顶部。删除该行。