Flutter 的 TextFormField 在定位小部件中不起作用

Question

我正在尝试为注册页面创建一个UI，其中包含TextFormFields的容器和仅用于装饰的蓝色容器之间有一点重叠。但是，当我使用Stack小部件和Positioned来设置白色容器的位置时，我的TextFormFields不起作用(当我单击时，它们不会打开键盘(。我使用的FlatButton也不起作用。我想知道我做错了什么。。。

在此处输入图像描述

class TelaCadastro extends StatefulWidget {
@override
_TelaCadastroState createState() => _TelaCadastroState();
}
final GlobalKey<FormState> _cadastroKey = GlobalKey<FormState>();
final FirebaseAuth _auth = FirebaseAuth.instance;
final TextEditingController _nomeController = TextEditingController();
final TextEditingController _emailController = TextEditingController();
final TextEditingController _senhaController = TextEditingController();
final TextEditingController _confirmarSenhaController = TextEditingController();

class _TelaCadastroState extends State<TelaCadastro> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
title: Text('Cadastrar'),
),
body: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 17),
color: Colors.indigo,
height: 150,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width - 50,
child: Text('A Corretora trabalha com as melhores '
'seguradoras do mercado',
style: TextStyle(fontSize: 21, color: Colors.white),),
),
),
),
SizedBox(height: 15,),
Positioned(
width: MediaQuery.of(context).size.width - 30,
left: 15,
top: 135,
child: Container(
height: 460,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Form(
key: _cadastroKey,
child: Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.person_add, color: Colors.indigo,),
Text(' Cadastre-se abaixo!',
style: TextStyle(fontSize: 16, color: Colors.indigo),),
],
),
SizedBox(height: 15),
TextFormField(
controller: _nomeController,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
) ,
prefixIcon: Icon(Icons.person),
hintText: 'Nome Completo',
filled: true,
fillColor: Colors.grey[200]
),
),
SizedBox(height: 20,),
TextFormField(
controller: _emailController,
validator: (String texto){
if (texto.isEmpty || !texto.contains('@')){
return 'Por favor, informe um email válido';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
) ,
prefixIcon: Icon(Icons.email),
hintText: 'Email',
filled: true,
fillColor: Colors.grey[200]
),
),
SizedBox(height: 20,),
TextFormField(
controller: _senhaController,
validator: (String texto){
if (texto.isEmpty || texto.length < 6){
return 'Por favor, informe uma senha válida';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
) ,
prefixIcon: Icon(Icons.lock),
hintText: 'Senha',
filled: true,
fillColor: Colors.grey[200]
),
obscureText: true,
),
SizedBox(height: 20,),
TextFormField(
controller: _confirmarSenhaController,
validator: (String texto){
if (texto.isEmpty || texto.length < 6){
return 'Por favor, informe uma senha válida';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius: BorderRadius.all(Radius.circular(10))
) ,
prefixIcon: Icon(Icons.lock),
hintText: 'Confirme sua Senha',
filled: true,
fillColor: Colors.grey[200]
),
obscureText: true,
),
SizedBox(height: 30,),
Builder(
builder: (context) => Container(
width: MediaQuery.of(context).size.width - 30,
height: 50,
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: FlatButton(
child: Text('Criar Conta', style: TextStyle(color: Colors.white),),
onPressed: (){
print('test');
},
),
),
),
SizedBox(height: 15,)
],
),
),
),
),
),
],
)
);
}
}

Answer 1

这里我评论了您的SizedBox小部件和包装的蓝色Container，它只用于装饰，Positioned小部件也提供了适当的宽度和高度。

现在它完全工作了/！！

您可以复制并粘贴运行以下完整代码：-

class TelaCadastro extends StatefulWidget {
@override
_TelaCadastroState createState() => _TelaCadastroState();
}
final GlobalKey<FormState> _cadastroKey = GlobalKey<FormState>();
//final FirebaseAuth _auth = FirebaseAuth.instance;
final TextEditingController _nomeController = TextEditingController();
final TextEditingController _emailController = TextEditingController();
final TextEditingController _senhaController = TextEditingController();
final TextEditingController _confirmarSenhaController = TextEditingController();
class _TelaCadastroState extends State<TelaCadastro> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
title: Text('Cadastrar'),
),
body: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
width: 414,
height: 150,
child: Container(
padding: EdgeInsets.only(left: 17),
color: Colors.indigo,
height: 150,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width - 50,
child: Text(
'A Corretora trabalha com as melhores '
'seguradoras do mercado',
style: TextStyle(fontSize: 21, color: Colors.white),
),
),
),
),
),
// SizedBox(
//   height: 15,
// ),
Positioned(
width: MediaQuery.of(context).size.width - 30,
left: 15,
top: 135,
child: Container(
height: 460,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Form(
key: _cadastroKey,
child: Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.person_add,
color: Colors.indigo,
),
Text(
' Cadastre-se abaixo!',
style:
TextStyle(fontSize: 16, color: Colors.indigo),
),
],
),
SizedBox(height: 15),
TextFormField(
controller: _nomeController,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
prefixIcon: Icon(Icons.person),
hintText: 'Nome Completo',
filled: true,
fillColor: Colors.grey[200]),
),
SizedBox(
height: 20,
),
TextFormField(
controller: _emailController,
validator: (String texto) {
if (texto.isEmpty || !texto.contains('@')) {
return 'Por favor, informe um email válido';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
prefixIcon: Icon(Icons.email),
hintText: 'Email',
filled: true,
fillColor: Colors.grey[200]),
),
SizedBox(
height: 20,
),
TextFormField(
controller: _senhaController,
validator: (String texto) {
if (texto.isEmpty || texto.length < 6) {
return 'Por favor, informe uma senha válida';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
prefixIcon: Icon(Icons.lock),
hintText: 'Senha',
filled: true,
fillColor: Colors.grey[200]),
obscureText: true,
),
SizedBox(
height: 20,
),
TextFormField(
controller: _confirmarSenhaController,
validator: (String texto) {
if (texto.isEmpty || texto.length < 6) {
return 'Por favor, informe uma senha válida';
}
return null;
},
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(10))),
prefixIcon: Icon(Icons.lock),
hintText: 'Confirme sua Senha',
filled: true,
fillColor: Colors.grey[200]),
obscureText: true,
),
SizedBox(
height: 30,
),
Builder(
builder: (context) => Container(
width: MediaQuery.of(context).size.width - 30,
height: 50,
decoration: BoxDecoration(
color: Colors.indigo,
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: FlatButton(
child: Text(
'Criar Conta',
style: TextStyle(color: Colors.white),
),
onPressed: () {
print('test');
},
),
),
),
SizedBox(
height: 15,
)
],
),
),
),
),
),
],
));
}
}