Flutter:(TextFormField)打开键盘开始打字时出现问题
Flutter:(TextFormField)Problem when opening the keyboard and start typing
当我打开键盘开始打字时，问题出现了太多space
[1]: https://i.stack.imgur.com/Nk4l6.png
[2]: https://i.stack.imgur.com/12jNe.png
代码：
import 'package:awesome_dialog/awesome_dialog.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
class SignUpScreen extends StatelessWidget {
@override
var Email, Pass;
var txt;
GlobalKey<FormState> formstate = new GlobalKey<FormState>();
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 0,
leading: Container(),
backgroundColor: Color(0xFF03045E),
),
body: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF03045E),Color(0xFF1F21D5),]
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
width: 45,
height: 45,
margin: EdgeInsets.only(top: 70,right: 35),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xff383989),
),
child: FlatButton(
onPressed: (){
Get.back();
},
child: Image(
image: AssetImage('assets/images/cancel-icon.png'),
color: Colors.white,
width: double.infinity,
),
),
),
],
),
Container(
margin: EdgeInsets.symmetric(horizontal: 35),
child: Column(
children: [
Container(
margin: EdgeInsets.only(bottom: 40),
child: Row(
children: [
Text('Create\n Account',style: TextStyle(
color: Colors.white,
fontSize: 30
),),
],
),
),
Row(
children: [
Text('Create account and enjoy 7 days free trial',style: TextStyle(
color: Color(0xffB2B2DC),
fontSize: 15
),),
],
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
Expanded(flex: 1 , child: Container(),),
Expanded(
flex: 10,
child: TextFormField(
keyboardType: TextInputType.name,
cursorColor: Colors.white,
style: TextStyle(fontSize: 18, color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white24,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
contentPadding: EdgeInsets.symmetric(vertical: 25.0, horizontal: 20.0),
hintText: 'Your first and last name?',
labelText: 'Full Name',
labelStyle: TextStyle(color:Colors.white60 , fontSize: 18),
hintStyle: TextStyle(color:Colors.white60 , fontSize: 18),
),
onSaved: (val) {
Email = val;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter some text';
}
},
),
),
Expanded(flex: 1 , child: Container(),)
],
),
Row(
children: [
Expanded(flex: 1 , child: Container(),),
Expanded(
flex: 10,
child: TextFormField(
keyboardType: TextInputType.emailAddress,
cursorColor: Colors.white,
style: TextStyle(fontSize: 18, color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white24,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
contentPadding: EdgeInsets.symmetric(vertical: 25.0, horizontal: 20.0),
labelText: 'Email',
labelStyle: TextStyle(color:Colors.white60 , fontSize: 18),
hintStyle: TextStyle(color:Colors.white60 , fontSize: 18),
),
onSaved: (val) {
Email = val;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter some text';
}
},
),
),
Expanded(flex: 1 , child: Container(),)
],
),
Row(
children: [
Expanded(flex: 1 , child: Container(),),
Expanded(
flex: 10,
child: TextFormField(
keyboardType: TextInputType.visiblePassword,
cursorColor: Colors.white,
style: TextStyle(fontSize: 18, color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white24,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
contentPadding: EdgeInsets.symmetric(vertical: 25.0, horizontal: 20.0),
labelText: 'password',
labelStyle: TextStyle(color:Colors.white60 , fontSize: 18),
hintStyle: TextStyle(color:Colors.white60 , fontSize: 18),
),
onSaved: (val) {
Email = val;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter some text';
}
},
),
),
Expanded(flex: 1 , child: Container(),)
],
),
Row(
children: [
Expanded(flex: 1 , child: Container(),),
Expanded(
flex: 10,
child: TextFormField(
keyboardType: TextInputType.visiblePassword,
cursorColor: Colors.white,
style: TextStyle(fontSize: 18, color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white24,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
contentPadding: EdgeInsets.symmetric(vertical: 25.0, horizontal: 20.0),
labelText: 're-password',
labelStyle: TextStyle(color:Colors.white60 , fontSize: 18),
hintStyle: TextStyle(color:Colors.white60 , fontSize: 18),
),
onSaved: (val) {
Email = val;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter some text';
}
},
),
),
Expanded(flex: 1 , child: Container(),)
],
),
Container(
margin: EdgeInsets.only(bottom: 50,top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(flex: 1 , child: Container(),),
Expanded(
flex: 10,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)
),
color: Colors.white,
height: 70,
onPressed: (){},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Text('Sign up',textAlign:TextAlign.center,
style: TextStyle(
color: Color(0xff03045E),
fontSize: 18.0,
),),
),
],
),
),
),
Expanded(flex: 1 , child: Container(),),
],
),
),
],
),
),
],
),),
],
),
),
);
}
}
========渲染库捕获异常================================ =====================
布局期间抛出以下断言：
底部溢出 51 个像素的 RenderFlex。
导致错误的相关小部件是：
列 Column:file:///M:/Android%20PG/lockvpn0/lib/view/auth/sign-up.dart:87:26
溢出的 RenderFlex 的方向为 Axis.vertical。
溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。这通常是因为内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。
这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用内容 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。
有问题的具体 RenderFlex 是：RenderFlex#d12d3 relayoutBoundary=up5 OVERFLOWING
...需要合成
...父数据：offset=Offset(0.0, 260.0);弹性=1； fit=FlexFit.tight（可以用size）
... 约束条件：BoxConstraints(0.0<=w<=411.4, h=388.9)
...尺寸：尺寸(411.4, 388.9)
... 方向：垂直
... mainAxisAlignment：space均匀
... mainAxisSize: 最大
... crossAxisAlignment：中心
...垂直方向：向下
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
您可以使用 SingleChildScrollView 包装您的列。这应该可以解决溢出问题。
如果您在脚手架上将 resizeToAvoidBottomInset 设置为 true，该列将不会被压扁，但您也将无法看到您的 TextFields。
当我打开键盘开始打字时，问题出现了太多space [1]: https://i.stack.imgur.com/Nk4l6.png [2]: https://i.stack.imgur.com/12jNe.png 代码：
import 'package:awesome_dialog/awesome_dialog.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
class SignUpScreen extends StatelessWidget {
@override
var Email, Pass;
var txt;
GlobalKey<FormState> formstate = new GlobalKey<FormState>();
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 0,
leading: Container(),
backgroundColor: Color(0xFF03045E),
),
body: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF03045E),Color(0xFF1F21D5),]
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
width: 45,
height: 45,
margin: EdgeInsets.only(top: 70,right: 35),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color(0xff383989),
),
child: FlatButton(
onPressed: (){
Get.back();
},
child: Image(
image: AssetImage('assets/images/cancel-icon.png'),
color: Colors.white,
width: double.infinity,
),
),
),
],
),
Container(
margin: EdgeInsets.symmetric(horizontal: 35),
child: Column(
children: [
Container(
margin: EdgeInsets.only(bottom: 40),
child: Row(
children: [
Text('Create\n Account',style: TextStyle(
color: Colors.white,
fontSize: 30
),),
],
),
),
Row(
children: [
Text('Create account and enjoy 7 days free trial',style: TextStyle(
color: Color(0xffB2B2DC),
fontSize: 15
),),
],
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
Expanded(flex: 1 , child: Container(),),
Expanded(
flex: 10,
child: TextFormField(
keyboardType: TextInputType.name,
cursorColor: Colors.white,
style: TextStyle(fontSize: 18, color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white24,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
contentPadding: EdgeInsets.symmetric(vertical: 25.0, horizontal: 20.0),
hintText: 'Your first and last name?',
labelText: 'Full Name',
labelStyle: TextStyle(color:Colors.white60 , fontSize: 18),
hintStyle: TextStyle(color:Colors.white60 , fontSize: 18),
),
onSaved: (val) {
Email = val;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter some text';
}
},
),
),
Expanded(flex: 1 , child: Container(),)
],
),
Row(
children: [
Expanded(flex: 1 , child: Container(),),
Expanded(
flex: 10,
child: TextFormField(
keyboardType: TextInputType.emailAddress,
cursorColor: Colors.white,
style: TextStyle(fontSize: 18, color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white24,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
contentPadding: EdgeInsets.symmetric(vertical: 25.0, horizontal: 20.0),
labelText: 'Email',
labelStyle: TextStyle(color:Colors.white60 , fontSize: 18),
hintStyle: TextStyle(color:Colors.white60 , fontSize: 18),
),
onSaved: (val) {
Email = val;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter some text';
}
},
),
),
Expanded(flex: 1 , child: Container(),)
],
),
Row(
children: [
Expanded(flex: 1 , child: Container(),),
Expanded(
flex: 10,
child: TextFormField(
keyboardType: TextInputType.visiblePassword,
cursorColor: Colors.white,
style: TextStyle(fontSize: 18, color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white24,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
contentPadding: EdgeInsets.symmetric(vertical: 25.0, horizontal: 20.0),
labelText: 'password',
labelStyle: TextStyle(color:Colors.white60 , fontSize: 18),
hintStyle: TextStyle(color:Colors.white60 , fontSize: 18),
),
onSaved: (val) {
Email = val;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter some text';
}
},
),
),
Expanded(flex: 1 , child: Container(),)
],
),
Row(
children: [
Expanded(flex: 1 , child: Container(),),
Expanded(
flex: 10,
child: TextFormField(
keyboardType: TextInputType.visiblePassword,
cursorColor: Colors.white,
style: TextStyle(fontSize: 18, color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white24,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
contentPadding: EdgeInsets.symmetric(vertical: 25.0, horizontal: 20.0),
labelText: 're-password',
labelStyle: TextStyle(color:Colors.white60 , fontSize: 18),
hintStyle: TextStyle(color:Colors.white60 , fontSize: 18),
),
onSaved: (val) {
Email = val;
},
validator: (val) {
if (val == null || val.isEmpty) {
return 'Please enter some text';
}
},
),
),
Expanded(flex: 1 , child: Container(),)
],
),
Container(
margin: EdgeInsets.only(bottom: 50,top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(flex: 1 , child: Container(),),
Expanded(
flex: 10,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)
),
color: Colors.white,
height: 70,
onPressed: (){},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Text('Sign up',textAlign:TextAlign.center,
style: TextStyle(
color: Color(0xff03045E),
fontSize: 18.0,
),),
),
],
),
),
),
Expanded(flex: 1 , child: Container(),),
],
),
),
],
),
),
],
),),
],
),
),
);
}
}
========渲染库捕获异常================================ ===================== 布局期间抛出以下断言： 底部溢出 51 个像素的 RenderFlex。
导致错误的相关小部件是： 列 Column:file:///M:/Android%20PG/lockvpn0/lib/view/auth/sign-up.dart:87:26 溢出的 RenderFlex 的方向为 Axis.vertical。 溢出的 RenderFlex 边缘已在渲染中用黄黑条纹图案标记。这通常是因为内容对于 RenderFlex 来说太大了。
考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 的子项适应可用 space 而不是调整到它们的自然大小。 这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用内容 space，请考虑在将其放入 flex 之前使用 ClipRect 小部件对其进行剪辑，或者使用可滚动容器而不是 Flex，例如 ListView。
有问题的具体 RenderFlex 是：RenderFlex#d12d3 relayoutBoundary=up5 OVERFLOWING ...需要合成 ...父数据：offset=Offset(0.0, 260.0);弹性=1； fit=FlexFit.tight（可以用size） ... 约束条件：BoxConstraints(0.0<=w<=411.4, h=388.9) ...尺寸：尺寸(411.4, 388.9) ... 方向：垂直 ... mainAxisAlignment：space均匀 ... mainAxisSize: 最大 ... crossAxisAlignment：中心 ...垂直方向：向下 ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
您可以使用 SingleChildScrollView 包装您的列。这应该可以解决溢出问题。
如果您在脚手架上将 resizeToAvoidBottomInset 设置为 true，该列将不会被压扁，但您也将无法看到您的 TextFields。