【发布时间】：2020-01-23 18:43:01
【问题描述】：
我创建了这段代码sn-p来在flutter web应用程序中创建一个登录web表单，其中我使用了TextFormField，它显示得很好但是当我尝试在这个字段中输入任何字符时，它没有响应并且没有输入已输入，请问如何解决？
class LoginForm extends StatefulWidget {
@override
LoginFormState createState() {
return LoginFormState();
}
}
class LoginFormState extends State<LoginForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// TODO: implement build
return Form(
key: _formKey,
child: Column(children: <Widget>[
Row(children: <Widget>[
// Email input field
Container(
width: 120.0,
child: Text(
"Email: *",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
fontWeight: FontWeight.w500,
fontFamily: 'Merriweather',
),
),
),
SizedBox(
width: 40.0,
),
Container(
width: MediaQuery.of(context).size.width / 4.0,
child: TextFormField(
keyboardType: TextInputType.emailAddress,
cursorColor: Colors.black,
style: TextStyle(
fontSize: 14.0,
),
decoration: InputDecoration(
hintText: 'e@x.y',
contentPadding: EdgeInsets.all(10.0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black87,
),
borderRadius: BorderRadius.circular(10.0),
),
),
validator: (value) {
if (value.isEmpty) {
return "Please enter your email!";
}
return "yayyy";
},
),
),
])
]));
}
}
预期：用户可以在 textFormfield 中输入输入 错误：用户无法输入任何内容，并且滚动条一直闪烁
更新：这是孵化表单本身的代码，希望对您有所帮助。
import 'package:flutter_web/material.dart';
/*import 'package:login_page/widgets/agree.dart';
import 'package:login_page/widgets/gender.dart';
**/
import 'package:dart_flutter_web_preview/widgets/login_form.dart';
import 'home.dart';
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.white, // ignore: undefined_operator
body: Padding(
padding: EdgeInsets.only(
top: 60.0, bottom: 60.0, left: 120.0, right: 120.0),
child: Card(
// ignore: argument_type_not_assignable
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
elevation: 5.0,
child: Container(
child: Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 3.3,
height: MediaQuery.of(context).size.height,
color: Color(0xFFCFE8E4),
child: Padding(
padding:
EdgeInsets.only(top: 85.0, right: 50.0, left: 50.0),
child: Align(
alignment: Alignment.centerRight,
child: Column(
children: <Widget>[
SizedBox(height: 60),
Container(
padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
//color: Colors.red,
child: Text(
'Go Ahead and Login',
style: TextStyle(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.bold,
fontFamily: 'Merriweather',
),
),
),
SizedBox(height: 5),
Container(
padding: EdgeInsets.only(top: 5.0, bottom: 5.0),
//color: Colors.red,
child: Text(
'It should only take a couple of seconds to login to your account',
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
fontFamily: 'Merriweather',
//fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
SizedBox(
height: 30.0,
),
RaisedButton(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) {
return Home();
}));
},
child: Text(
'Home',
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
fontWeight: FontWeight.bold,
fontFamily: 'Merriweather',
),
),
),
],
),
),
),
),
Container(
padding: EdgeInsets.only(
top: 140.0, right: 30.0, left: 30.0, bottom: 5.0),
width: MediaQuery.of(context).size.width / 2.3,
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
Text(
"Login",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontSize: 35.0,
fontFamily: 'Merriweather',
),
//textAlign: TextAlign.end,
),
const SizedBox(
height: 30.0,
),
new LoginForm(),
],
),
),
],
),
),
),
));
} //Widget
} //
【问题讨论】：
-
您是否尝试将表单包裹在 Scaffold 中？
-
我试过了，但没有任何改变。这可能是由于版本问题。埃及极客中的一些人提到了这一点。
-
最新版本有很多增强，我用脚手架包装它并测试你的代码它工作正常。
-
我想我必须升级我的版本。谢谢
标签： flutter dart flutter-web