Flutter Dart:当我转移到另一个文件时，TextEditingController无法工作

Question

我对Dart和一般编码都很陌生。我在观看了YouTube上的教程后制作了这段代码。在大多数情况下，我能够自己解决大部分问题，但我无法找出最近的错误。在这里，我在一个页面上制作了一个TextEditingController(BTW工作得很好(，后来我转移到另一个页面来清理代码。但他们停止了工作。

import 'package:care_ls/model/userProfileModel.dart';
import 'package:care_ls/services/database.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:care_ls/views/views.dart';
import 'package:care_ls/controllers/controllers.dart';
class ProfilePage extends StatelessWidget {
const ProfilePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {

return Scaffold(
body: SafeArea(
child: Column(
children: [
TextFormField(
controller: profilePageTextControllers().fnameController,
onChanged: (e)=> print(e),
obscureText: false,
decoration: const InputDecoration(
hintText: 'First Name',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xff2AA8A1),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xff272361),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
),
//style: FlutterFlowTheme.of(context).bodyText1,
),
TextFormField(
controller: profilePageTextControllers().lnameController,
obscureText: false,
decoration: const InputDecoration(
hintText: 'Second Name',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xff2AA8A1),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xff272361),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
),
//style: FlutterFlowTheme.of(context).bodyText1,
),

ElevatedButton(
onPressed: () async {
final userprofile = UserProfileModel(
firstName: profilePageTextControllers().fnameController.text.trim(),
lastName: profilePageTextControllers().lnameController.text.trim(),
);
await Database.addProfile(userprofile);
profilePageTextControllers().fnameController.clear();
profilePageTextControllers().lnameController.clear();

print('Data Sent');
},
child: Text('Done')),
ElevatedButton(
onPressed: () => Get.to(HomePage()), child: Text('Back')),
],
),
),
);
}
}

这是我的控制器，我移动到另一个文件

import 'package:flutter/material.dart';
class profilePageTextControllers {
TextEditingController fnameController = TextEditingController();
TextEditingController lnameController = TextEditingController();
}

有人能帮助我理解我做错了什么吗？

Answer 1

你在这里犯了一个愚蠢的错误。当你使用TextFormField时，你应该使用一个全局表单键来处理表单

class ProfilePage extends StatefulWidget {
ProfilePage({Key? key}) : super(key: key);
@override
State<ProfilePage> createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
final _key = GlobalKey<FormState>();
TextEditingController fnameController = TextEditingController();
TextEditingController lnameController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Form(
key: _key,
child: Column(
children: [
TextFormField(
controller: fnameController,
onChanged: (e)=> print(e),
obscureText: false,
decoration: const InputDecoration(
hintText: 'First Name',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xff2AA8A1),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xff272361),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
),
//style: FlutterFlowTheme.of(context).bodyText1,
),
TextFormField(
controller: lnameController,
obscureText: false,
decoration: const InputDecoration(
hintText: 'Second Name',
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xff2AA8A1),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Color(0xff272361),
width: 1,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4.0),
topRight: Radius.circular(4.0),
),
),
),
//style: FlutterFlowTheme.of(context).bodyText1,
),
ElevatedButton(
onPressed: () async {
final userprofile = UserProfileModel(
firstName: fnameController.text.trim(),
lastName: lnameController.text.trim(),
);
await Database.addProfile(userprofile);
fnameController.clear();
lnameController.clear();
print('Data Sent');
},
child: Text('Done')),
ElevatedButton(
onPressed: () => Get.to(HomePage()), child: Text('Back')),
],
),
),
),
);
}
}

Answer 2

问题的根源是您没有正确了解state，然后您试图使用状态管理来构建项目。

首先，您需要了解无状态与有状态小部件。然后，您需要学习状态管理

不要在代码的每一个角落都使用get包，从而在心理上屈服于它。

---

现在，让我们剖析一下您的代码。

当您使用以下代码时：

controller: profilePageTextControllers().fnameController,

您正在创建一个新的profilePageTextControllers对象，然后访问它的fnameController属性。

然后你的另一个代码：

controller: profilePageTextControllers().lnameController,

正在创建另一个profilePageTextControllers对象。

所以，你现在有两个不同的对象。

然后在onPressed按钮中创建另一个对象：

final userprofile = UserProfileModel(
firstName: profilePageTextControllers().fnameController.text.trim(),
lastName: profilePageTextControllers().lnameController.text.trim(),
);

因此，您尝试从TextFormField中使用的不同对象访问fnameController和lnameController。

您可以通过创建一个profilePageTextControllers变量来修复代码逻辑，然后在TextFormField中使用它。类似这样的东西：

class ProfilePage extends StatelessWidget {
const ProfilePage({Key? key}) : super(key: key);
var _controllers = profilePageTextControllers();
@override
Widget build(BuildContext context) {
return Scaffold(
body : SafeArea(
child: Column(
children: [
TextFormField(
controller: _controllers.fnameController,
...
),
TextFormField(
controller: _controllers.lnameController,
...
),

// Use _controllers in button onPressed too.
]
)
)
);

}
}

或者，为了获得更好的解决方案，您可以使用StatefulWidget来关注@saiful islam answer。