2个具有相同值的文本域

Question

我创建了一个代码，当按钮被按下时创建一个文本字段。我遇到了一个问题如果你在文本框1中输入内容它会自动进入文本框2所以我不能有两个不同的内容

我有以下代码

int numberOfTextFields = 1;
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
leading: CloseButton(),
actions: buildEditingActions(),
backgroundColor: Colors.red,
),
body: SingleChildScrollView(
padding: EdgeInsets.all(12),
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
for(int i = 0 ; i < numberOfTextFields ; i++) 
buildExerciseComplete(),
buildAddMore(),
],
),
),
),
);

with是一个简单的按钮，buildsets()是这样的:

Widget buildSets() => TextFormField(
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
style: TextStyle(fontSize: 15),
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Sets',
),
onFieldSubmitted: (_) => saveForm,
validator: (sets) =>
sets != null && sets.isEmpty ? 'Sets cannot be empty' : null,
controller: setsController,
);

，这是按钮:

Widget buildAddMore() => ElevatedButton(
onPressed: () {
setState((){
numberOfTextFields++;
});
},
child: Text('Add new exercise'),  
);

我存储信息的方式是"set "如果这是在PHP中，我会说set $numberOfTextFields给他们一个不同的位置来存储。我不太确定如何在扑动，我尝试了方法集${numberOfTextFields}。但我不工作

我上面的代码有点简化了。我的实际代码是这样的:问题是两个不同的字段总是具有相同的值图片显示

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'utils.dart';
import 'event_provider.dart';
class EventEditingPage extends StatefulWidget {
final Event? event;
const EventEditingPage({Key? key, this.event}) : super(key: key);
@override
_EventEditingPageState createState() => _EventEditingPageState();
}
class _EventEditingPageState extends State<EventEditingPage> {
final _formKey = GlobalKey<FormState>();
final setsController = TextEditingController();
@override
void initState() {
super.initState();
final event = widget.event!;
setsController.text = event.Sets;
}
}
@override
void dispose() {
setsController.dispose();
super.dispose();
}

int numberOfTextFields = 1;
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
leading: CloseButton(),
actions: buildEditingActions(),
backgroundColor: Colors.red,
),
body: SingleChildScrollView(
padding: EdgeInsets.all(12),
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
for(int i = 0 ; i < numberOfTextFields ; i++) 
buildExerciseComplete(),
buildAddMore(),
],
),
),
);

List<Widget> buildEditingActions() => [
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
primary: Colors.transparent, shadowColor: Colors.transparent),
onPressed: saveForm,
icon: Icon(Icons.done),
label: Text('Save'),
)
];

Widget buildExerciseComplete() => Container(
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Color.fromARGB(255, 255, 200, 200),
borderRadius: BorderRadius.circular(5.0),
border: Border.all(
width: 2.0,
),
),
height: 50,
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(child: buildSets()),
],
),
),
],
),
);
Widget buildSets() => TextFormField(
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
style: TextStyle(fontSize: 15),
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Sets',
),
onFieldSubmitted: (_) => saveForm,
validator: (sets) =>
sets != null && sets.isEmpty ? 'Sets cannot be empty' : null,
controller: setsController,
);

Widget buildAddMore() => ElevatedButton(
onPressed: () {
setState((){
numberOfTextFields++;
});
},
child: Text('Add new exercise'),  
);




Future saveForm() async {
final isValid = _formKey.currentState!.validate();
if (isValid) {
final event = Event(
Sets: setsController.text);

class Event {
final String Sets;
final Color backgroundColor;

const Event({
required this.Sets,
});
}

Answer 1

问题是，您使用相同的TextEditingController()与所有文本字段，您必须为每个创建一个控制器，您可以执行以下操作:

步骤1:删除当前使用的TextEditingController逻辑

步骤2:在包含名为numberOfTextFields的变量的屏幕中，定义TextEditingController的List，并在其中启动一个控制器:

List<TextEditingController> _textEditingControllers = [TextEditingController()];

步骤3:在add more function中，当增加numberOfTextFields变量时，向列表中添加一个新控制器:

onPressed: () {
setState(() {
numberOfTextFields++;
_textEditingControllers.add(TextEditingController());
});
},

步骤4:在循环内部，当您基于变量numberOfTextFields的值创建Text Fields时，将与循环计数器i的值相对应的控制器传递给列表中的小部件:

children: [
for(int i = 0 ; i < numberOfTextFields ; i ++) 
buildExerciseComplete(controller: _textEditingControllers[i]),
buildAddMore(),
],

*注意，TextFormField已经嵌套在一些小部件中，然后你必须将控制器传递给小部件，直到你到达TextFormField。

第五步:在声明_textEditingControllers列表的屏幕中，在dispose方法中处置列表中的所有控制器:

@override
void dispose() {
for (TextEditingController controller in _textEditingControllers)
{
controller.dispose();
}
super.dispose();
}

就是这样!

Answer 2

为循环中的每个文本字段设置controller: setsController是问题的原因，为多个textfield设置相同的TextEditingController将导致在所有共享相同控制器的textfield中键入相同的内容，要解决这个问题，您需要为每个textfield初始化一个textteditingcontroller

---

更新:
要为每个字段设置不同的控制器，你必须创建一个List<TextEditingController>，它必须与你的numberOfTextFields大小相同，将控制器或索引传递给你的方法:

Widget buildSets(final TextEditingController controller) => TextFormField(
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
style: TextStyle(fontSize: 15),
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Sets',
),
onFieldSubmitted: (_) => saveForm,
validator: (sets) =>
sets != null && sets.isEmpty ? 'Sets cannot be empty' : null,
controller: controller,
);
//Calling the method:
for(int i = 0 ; i < numberOfTextFields ; i++) 
buildSets(myControllers[i]),

Answer 3

为每个字段创建单独的控制器。您可以使用List<TextEditingController> controllers在其中存储控制器，并且在循环的每次迭代中，您可以使用controllers.add方法使用controllers[i].text = '$i'添加控制器。并在textField中像这样设置控制器:controller: controllers['i'].