对不起我的英语，我是法国人。
我为用户的题字创建了一个页面，但问题是手机的尺寸很小。我有溢出的问题；我想要一个滚动页面，但使用窗口小部件SingleChildScrollView，我的窗口小部件的高度出现问题，无法正常工作。
return Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.blue[900],
Colors.blue[800],
Colors.blue[400],
],
begin: Alignment.topCenter
)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 80,),
Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
FadeAnimation(1.3, Text(
"New user",
style: TextStyle(
color: Colors.white,
fontSize: 40,
),
),
),
FadeAnimation(1, Text(
"Welcome to OCiné",
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
))
],
)
),
SizedBox(height: 15,),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(60), topRight: Radius.circular(60))
),
child: Padding(
padding: EdgeInsets.all(30),
child: Column(
children: <Widget>[
SizedBox(height: 20,),
FadeAnimation(1.4, Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [BoxShadow(
color: Color.fromRGBO(33, 150, 243, .3),
blurRadius: 20,
offset: Offset(0, 10),
)],
),
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey[300]))
),
child: TextField(
//controller: _emailController,
decoration: InputDecoration(
hintText: "Enter firstname",
hintStyle: TextStyle(
color: Colors.grey
),
border: InputBorder.none
),
),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey[300]))
),
child: TextField(
//controller: _emailController,
decoration: InputDecoration(
hintText: "Enter lastname",
hintStyle: TextStyle(
color: Colors.grey
),
border: InputBorder.none
),
),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey[300]))
),
child: TextField(
//controller: _emailController,
decoration: InputDecoration(
hintText: "Enter email",
hintStyle: TextStyle(
color: Colors.grey
),
border: InputBorder.none
),
),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey[300]))
),
child: TextField(
obscureText: true,
//controller: _passwordController,
decoration: InputDecoration(
hintText: "Enter password",
hintStyle: TextStyle(
color: Colors.grey
),
border: InputBorder.none
),
),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.grey[300]))
),
child: TextField(
maxLength: 20,
//controller: _passwordController,
decoration: InputDecoration(
hintText: "Enter username",
hintStyle: TextStyle(
color: Colors.grey
),
border: InputBorder.none
),
),
),
],
),
)),
SizedBox(height: 20,),
FadeAnimation(1.5, InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(
builder: (context){
return LoginPage();
}
));
},
child: Text("Already an account ?", style: TextStyle(color: Colors.grey)),
)),
SizedBox(height: 20,),
FadeAnimation(1.6, InkWell(
onTap: () async{
//AuthProvider().createUser();
},
child: Container(
height: 50,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: Colors.blue[900],
),
child: Center(
child: Text("Create User", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
),
),
)),
],
),
),
),
)
],
),
),
);
}
}
如果有任何解决方案。我接受了，谢谢
答案 0 :(得分：0)
您这里有3列，您不能包装第一个列，因为这会引起高度问题，因为您的SingleChildScrollView的大小为无穷大，有一个孩子（该列）的大小也为无限
但是，您可以做的是用SingleChildScrollView包装第三列（最深的列），该列包含文本字段，并且应该使容器上的内容可滚动。
当您需要使用SingleChildScrollView包裹一列并导致高度错误时，您可以使用IntrinsicHeight小部件来包裹导致无限高度的Column
答案 1 :(得分：0)
您不能在Expanded内使用SingleChildScrollView，因此，如果要在具有{{1 }}小部件，您可以使用Expanded小部件。您可以在列中使用SingleChildScrollView，只要您的列不会收缩空间即可，因为列本身会自动换行。 Expanded是问题所在。