flutter - Flutter inpute文本字段在失去焦点时丢失文本
问题描述
我正在尝试在颤动中制作一个登录页面......
所以我为用户名添加了 2 个文本输入字段,为密码添加了一个
但是当我尝试从用户名到密码或从密码到用户名时,我之前输入的文本消失了
这是我的登录屏幕: import 'package:flutter/material.dart';
import '../widgets/password_input.dart';
class LoginScreen extends StatelessWidget {
static const routeName = '/login';
Widget build(BuildContext context) {
final deviceSize = MediaQuery.of(context).size;
final _username = TextEditingController();
final _password = TextEditingController();
_clearValues() {
_username.clear();
_password.clear();
}
return Scaffold(
appBar: AppBar(
title: Text('Duckanji'),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
child: Column(
children: [
Container(
margin: EdgeInsets.symmetric(vertical: 30),
child: Image.asset(
'assets/img/auth_logo.png',
width: deviceSize.width * 0.5,
),
),
SizedBox(
height: 10,
),
Container(
height: 100,
margin: EdgeInsets.symmetric(horizontal: 20),
child: TextField(
textInputAction: TextInputAction.next,
controller: _username,
maxLength: 35,
decoration: InputDecoration(
prefixIcon: Icon(Icons.account_box_rounded),
border: OutlineInputBorder(),
labelText: 'Username',
),
),
),
PasswordInput(_password),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
FlatButton(
padding: EdgeInsets.symmetric(
vertical: 10,
horizontal: 15,
),
color: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
onPressed: () {
print(_username.text);
print(_password.text);
_clearValues();
},
child: Text(
'Login',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
FlatButton(
padding: EdgeInsets.symmetric(
vertical: 10,
horizontal: 15,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(
color: Theme.of(context).primaryColor,
),
),
onPressed: () {},
child: Text(
'Register',
style: TextStyle(
fontSize: 20,
color: Theme.of(context).primaryColor,
),
),
),
],
),
],
),
),
),
);
}
}
这是我添加到代码中的密码输入小部件:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class PasswordInput extends StatefulWidget {
TextEditingController password;
PasswordInput(this.password);
@override
_PasswordInputState createState() => _PasswordInputState();
}
class _PasswordInputState extends State<PasswordInput> {
var hiddenContent = true;
@override
Widget build(BuildContext context) {
return Container(
height: 100,
margin: EdgeInsets.symmetric(horizontal: 20),
child: TextField(
onChanged: (value) {
print(value);
widget.password.text = value;
},
textInputAction: TextInputAction.done,
obscureText: hiddenContent,
autocorrect: false,
controller: widget.password,
keyboardType: TextInputType.text,
maxLength: 35,
decoration: InputDecoration(
prefixIcon: Icon(Icons.lock),
suffixIcon: IconButton(
icon: hiddenContent
? Icon(Icons.visibility)
: Icon(Icons.visibility_off),
onPressed: (hiddenContent
? () {
setState(() {
hiddenContent = false;
});
}
: () {
setState(() {
hiddenContent = true;
});
}),
),
border: OutlineInputBorder(),
labelText: 'Password',
),
),
);
}
}
解决方案
Hy Yusof Antar!
解决方法很简单!
TextEditingController 变量必须在 Widget 构建方法之外。
只需将两个控制器变量移出 Widget 构建方法即可。
推荐阅读
- windows - Windows Performance Analyzer (WPA) 中的 CPU(采样)图未显示
- c++ - 使用模板的节点队列
- reactjs - 导入变量 scss
- c# - 为字典生成招摇
- python - PyQT:如何在主线程上调用函数并获取结果(不预先存储结果)?
- firebase - 使用 image_picker 访问图像然后将其发送到 Firebase 存储时出现 BackgroundSession 和守护程序错误
- python - 根据列中的值匹配两个 Pandas DataFrame
- javascript - 提示中的 Javascript“不等于”功能
- python-3.x - 如何计算csv文件列内的平均值?
- c++ - 当数组大小过大(例如,大小> = 800)时,C++ 代码不显示输出,但在在线编译器中工作正常