如何在Flutter中保存TextField的值以便在其他地方使用

Question

我正在创建一个非常简单的应用程序-用户将获得4个文本字段，并在其中输入数字。然后我想对这些数字做一些数学运算。如何将这些输入保存在变量中，我可以在任何我想要的地方和相关时刻使用这些变量？

目前，我只创建了在创建它们的类上显示它的可能性：

我的文本字段如下(我有4个文本字段：e、f、g和h:

var e = '';
TextField(
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
onChanged: (newVal) {
e = newVal;},),

这是按钮-当我点击它时，我可以看到输入

floatingActionButton: FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Text('You wrote $d $e $f $g'),
);
},
);

但是，如何将这些输入保存到此类之外的变量中呢？

Answer 1

您可以将值从onChanged保存到状态管理解决方案，如StatefulWidget或Providers等等

TextField(
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
onChanged: (newVal) {
if(newVal != null){
context.read<SignUpBloc>().add(SignUpEvent.mobileChanged(mobile: newVal));
}
},),

这就是我们在Bloc中的做法。您可以在任何其他状态管理解决方案中执行同样的操作，甚至可以将其本地存储在SharedPreferences中。

Answer 2

首先，您需要在类中为要更改的每个字段创建一个TextEditingController：

class _MyClassWithDataState extends State<MyClassWithData> {
TextEditingController textController1 = TextEditingController();
TextEditingController textController2 = TextEditingController();
TextEditingController textController3 = TextEditingController();
TextEditingController textController4 = TextEditingController();
}

并在另一个类上定义您需要的数据：

class ClassWithReceivedData extends StatefulWidget {
const ClassWithReceivedData({
Key? key,
required this.text1,
required this.text2,
required this.text3,
required this.text4,
}) : super(key: key);
final TextEditingController text1;
final TextEditingController text2;
final TextEditingController text3;
final TextEditingController text4;
@override
State<ClassWithReceivedData> createState() =>     
_ClassWithReceivedDataState();
}

然后当你导航到另一个页面时，你只需通过：

Navigator.push(context, new MaterialPageRoute(builder: (context) => new 
ClassWithReceivedData(text1: textController1, text2: textController2, 
text3: textController3, text4: textController4);

但是，如果你真的需要在多个类上检索数据，我建议为你需要的数据创建一个Controller或Store类，然后使用状态管理，如Provider、Get、Mobx等，来检索你想要的任何数据。