#flutter #dart
#flutter #dart
Вопрос:
Я пытаюсь отобразить список форм flutter с помощью конструктора представления списка. Пользовательский интерфейс, для которого я уже сделал.
Теперь я хочу получить доступ к данным для каждой формы и проверить, может ли кто-нибудь помочь мне?
я пробовал разные подходы и проверял похожие сообщения в StackOverflow, но не смог найти никакого решения для того же.
entries_widget.dart — где создается форма
class EntriesWidget extends StatefulWidget {
EntriesWidget({Key key}) : super(key: key);
@override
EntriesWidgetState createState() => EntriesWidgetState();
}
class EntriesWidgetState extends State<EntriesWidget> {
List<EntryCard> entryCardList = [];
int count = 0;
void removeEntryCard(index) {
print("inside remove function ${index}");
setState(() {
entryCardList.remove(index);
// index ;
});
}
void addEntryCard() {
setState(() {
entryCardList.add(
EntryCard(removeEntryCard, index: entryCardList.length),
);
});
}
@override
void initState() {
// addEntryCard(); //Initialize with 1 item
super.initState();
}
@override
Widget build(BuildContext context) {
return Material(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('1. HRD Timesheet (Systems)', style: kDefaultTitleStyle),
GestureDetector(
onTap: addEntryCard,
child: Chip(
label: Text(' Add Task'),
backgroundColor: Colors.grey,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
),
],
),
SizedBox(height: 10.0),
Container(
decoration: BoxDecoration(
border: Border.all(color: kPrimaryAppColor),
),
child: Padding(
padding: const EdgeInsets.all(6.0),
child: Column(
children: [
ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: [
...entryCardList,
],
),
],
),
),
),
],
),
);
}
void saveForm2() {
print("inside save form");
// if (formKey.currentState.validate()) {
// formKey.currentState.save();
// print(widget.taskEntry.taskName);
// print(widget.taskEntry.taskHours);
// }
}
}
class EntryCard extends StatefulWidget {
final TaskEntry taskEntry;
final int index;
final Function(EntryCard) removeEntryCard;
// final TextEditingController hours;
// final TextEditingController task;
const EntryCard(this.removeEntryCard,
{Key key, @required this.index, this.taskEntry})
: super(key: key);
void remove() {
print("Called remove on " this.hashCode.toString());
removeEntryCard(this);
}
@override
EntryCardState createState() {
return EntryCardState(index, remove);
}
}
class EntryCardState extends State<EntryCard> {
final int entryIndex;
final Function() remove;
final formKey = GlobalKey<FormState>();
EntryCardState(this.entryIndex, this.remove);
@override
Widget build(BuildContext context) {
return Form(
key: formKey,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: TextFormField(
// initialValue: widget.user.fullName,
onSaved: (val) => widget.taskEntry.taskHours = val,
validator: (val) => val.length > 1 ? null : 'Invalid Field',
// controller: widget.hours,
decoration: InputDecoration(
hintText: "Hours ${widget.index}",
isDense: true,
// border: OutlineInputBorder(),
),
),
),
SizedBox(width: 5.0),
Expanded(
child: TextFormField(
onSaved: (val) => widget.taskEntry.taskName = val,
validator: (val) => val.length > 1 ? null : 'Invalid Field',
// controller: widget.task,
decoration: InputDecoration(
hintText: "Task Name ${widget.index}",
// border: OutlineInputBorder(),
isDense: true,
),
),
),
IconButton(
icon: Icon(Icons.remove),
color: kPrimaryAppColor,
onPressed: () {
widget.remove();
},
)
],
),
SizedBox(height: 5.0),
// TextFormField(
// decoration: InputDecoration(
// hintText: "This is Remarks ${index}",
// border: O`utlineInputBorder(),
// ),
// ),
// SizedBox(height: 10.0),
],
),
);
}
void saveForm() {
print("inside save form");
if (formKey.currentState.validate()) {
formKey.currentState.save();
print(widget.taskEntry.taskName);
print(widget.taskEntry.taskHours);
}
}
}
add_timesheet_page.dart
final key = new GlobalKey<EntriesWidgetState>();
final keyForm = GlobalKey<EntryCardState>();
class AddTimesheet extends StatefulWidget {
@override
_AddTimesheetState createState() => _AddTimesheetState();
}
class _AddTimesheetState extends State<AddTimesheet> {
String dropdownValue = 'Week 1';
// List<TaskEntry> taskEntries = [];
List<EntriesWidget> entriesWidgets = [];
// var cards = <Card>[];
submitData() {
print("inside submit");
keyForm.currentState.saveForm();
key.currentState.saveForm2();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: MyAppBar(
context,
titleText: "Add Log",
isChipLayout: false,
),
body: SingleChildScrollView(
physics: ScrollPhysics(),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Text(
'Naman Ambavi - 1405',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20.0,
color: kPrimaryAppColor,
),
),
),
SizedBox(height: 15.0),
Text('Week', style: kDefaultTitleStyle),
Container(
width: 300,
child: DropdownButton(
isExpanded: true,
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: kPrimaryAppColor),
underline: Container(
height: 2,
color: kPrimaryAppColor,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>[
'Week 1',
'Week 2 (1st Oct - 10th Oct)',
'Week 3'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
SizedBox(
height: 18.0,
),
const Divider(
color: kPrimaryAppColor,
thickness: 0.5,
),
Text('Select Department', style: kDefaultTitleStyle),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FlatButton(
color: kPrimaryAppColor,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: kPrimaryAppColor,
onPressed: () {
/*...*/
},
child: Text(
"IT",
style: TextStyle(fontSize: 20.0),
),
),
FlatButton(
color: kPrimaryAppColor,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: kPrimaryAppColor,
onPressed: () {
/*...*/
},
child: Text(
"PMT",
style: TextStyle(fontSize: 20.0),
),
),
FlatButton(
color: kPrimaryAppColor,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: kPrimaryAppColor,
onPressed: () {
/*...*/
},
child: Text(
"AV",
style: TextStyle(fontSize: 20.0),
),
),
],
),
SizedBox(height: 15.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'IT Hours for week: 35/40 hours',
style: kDefaultParagraphStyle,
),
Chip(
label: Text('View Log'),
backgroundColor: Colors.grey,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
],
),
SizedBox(height: 20.0),
// Expanded(
// child: ListView.builder(
// itemCount: cards.length,
// itemBuilder: (BuildContext context, int index) {
// return cards[index];
// },
// ),
// ),
SizedBox(height: 20.0),
// EntriesWidget(),
Flexible(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 2,
itemBuilder: (context, index) {
return EntriesWidget(key: keyForm);
},
),
),
SizedBox(height: 20.0),
Center(
child: FlatButton(
color: kPrimaryAppColor,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: kPrimaryAppColor,
onPressed: submitData,
child: Text(
"Add Log",
style: TextStyle(fontSize: 20.0),
),
),
),
],
),
),
),
);
}
void onSave() {
// entries.forEach((form) => allValid = allValid amp;amp; form.isValid());
// var data = taskEntries.map((it) => it.taskEntries).toList();
}
}
task_entry_model.dart
class TaskEntry {
String taskName;
String taskHours;
TaskEntry({this.taskName = '', this.taskHours = ''});
String toString() {
return 'Student: {TaskName: $taskName, TaskHours: $taskHours}';
}
}
Комментарии:
1.github.com/JaveedIshaq/flutter_multiple_form youtube.com/watch?v=H2pVgDjDrxQ посмотрите это видео и соответствующий репозиторий Github, если это может вам помочь
2. да, я использовал его код в качестве ссылки. но все еще сталкивается с проблемой. мой вариант использования немного на один уровень выше. Я пытаюсь создать форму с помощью построителя списков
3. пожалуйста, опубликуйте класс TaskEntry. Спасибо.
4. @chunhunghan — добавлено
Ответ №1:
Вы можете скопировать вставить запустить полный код ниже
, слишком долго описывать все детали, вы напрямую ссылаетесь на полный код и рабочую демонстрацию ниже
Шаг 1: вам нужно List<GlobalKey<EntriesWidgetState>> для EntriesWidget(key: key[index]);
List<GlobalKey<EntriesWidgetState>> key = [
GlobalKey<EntriesWidgetState>(),
GlobalKey<EntriesWidgetState>()
];
...
Flexible(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 2,
itemBuilder: (context, index) {
return EntriesWidget(key: key[index]);
},
),
),
Шаг 2: ввод List<GlobalKey<EntryCardState>> keyForm EntriesWidgetState и использование removeAt
класс EntriesWidgetState расширяет состояние { Список entryCardList = []; int count = 0; Список <GlobalKey> keyForm = []; int keyFormIndex = -1;
void removeEntryCard(index, EntryCard) {
print("inside remove function ${index}");
keyFormIndex = keyFormIndex - 1;
var pos = entryCardList.indexOf(EntryCard);
print("pos $pos");
setState(() {
entryCardList.removeAt(pos);
keyForm.removeAt(pos);
// index ;
});
}
void addEntryCard() {
setState(() {
keyForm.add(GlobalKey<EntryCardState>());
keyFormIndex = keyFormIndex 1;
entryCardList.add(
EntryCard(
removeEntryCard,
key: keyForm[keyFormIndex],
index: entryCardList.length,
taskEntry: TaskEntry(),
),
);
});
}
Шаг 3: для каждого цикла key и вызова saveForm
submitData() {
print("inside submit");
key.forEach((element) {
element.currentState.saveForm2();
});
}
...
void saveForm2() {
keyForm.forEach((element) {
element.currentState.saveForm();
});
рабочая демонстрация
полный код
import 'package:flutter/material.dart';
const Color kPrimaryAppColor = Colors.blue;
TextStyle kDefaultTitleStyle = TextStyle(color: Colors.black);
TextStyle kDefaultParagraphStyle = TextStyle(color: Colors.black);
class TaskEntry {
String taskName;
String taskHours;
TaskEntry({this.taskName = '', this.taskHours = ''});
String toString() {
return 'Student: {TaskName: $taskName, TaskHours: $taskHours}';
}
}
List<GlobalKey<EntriesWidgetState>> key = [
GlobalKey<EntriesWidgetState>(),
GlobalKey<EntriesWidgetState>()
];
//final keyForm = GlobalKey<EntryCardState>();
class AddTimesheet extends StatefulWidget {
@override
_AddTimesheetState createState() => _AddTimesheetState();
}
class _AddTimesheetState extends State<AddTimesheet> {
String dropdownValue = 'Week 1';
// List<TaskEntry> taskEntries = [];
List<EntriesWidget> entriesWidgets = [];
// var cards = <Card>[];
submitData() {
print("inside submit");
key.forEach((element) {
element.currentState.saveForm2();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SingleChildScrollView(
physics: ScrollPhysics(),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Text(
'Naman Ambavi - 1405',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20.0,
color: kPrimaryAppColor,
),
),
),
SizedBox(height: 15.0),
Text('Week', style: kDefaultTitleStyle),
Container(
width: 300,
child: DropdownButton(
isExpanded: true,
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: TextStyle(color: kPrimaryAppColor),
underline: Container(
height: 2,
color: kPrimaryAppColor,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>[
'Week 1',
'Week 2 (1st Oct - 10th Oct)',
'Week 3'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
SizedBox(
height: 18.0,
),
const Divider(
color: kPrimaryAppColor,
thickness: 0.5,
),
Text('Select Department', style: kDefaultTitleStyle),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FlatButton(
color: kPrimaryAppColor,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: kPrimaryAppColor,
onPressed: () {
/*...*/
},
child: Text(
"IT",
style: TextStyle(fontSize: 20.0),
),
),
FlatButton(
color: kPrimaryAppColor,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: kPrimaryAppColor,
onPressed: () {
/*...*/
},
child: Text(
"PMT",
style: TextStyle(fontSize: 20.0),
),
),
FlatButton(
color: kPrimaryAppColor,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: kPrimaryAppColor,
onPressed: () {
/*...*/
},
child: Text(
"AV",
style: TextStyle(fontSize: 20.0),
),
),
],
),
SizedBox(height: 15.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'IT Hours for week: 35/40 hours',
style: kDefaultParagraphStyle,
),
Chip(
label: Text('View Log'),
backgroundColor: Colors.grey,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
],
),
SizedBox(height: 20.0),
// Expanded(
// child: ListView.builder(
// itemCount: cards.length,
// itemBuilder: (BuildContext context, int index) {
// return cards[index];
// },
// ),
// ),
SizedBox(height: 20.0),
// EntriesWidget(),
Flexible(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 2,
itemBuilder: (context, index) {
return EntriesWidget(key: key[index]);
},
),
),
SizedBox(height: 20.0),
Center(
child: FlatButton(
color: kPrimaryAppColor,
textColor: Colors.white,
disabledColor: Colors.grey,
disabledTextColor: Colors.black,
padding: EdgeInsets.all(8.0),
splashColor: kPrimaryAppColor,
onPressed: submitData,
child: Text(
"Add Log",
style: TextStyle(fontSize: 20.0),
),
),
),
],
),
),
),
);
}
void onSave() {
// entries.forEach((form) => allValid = allValid amp;amp; form.isValid());
// var data = taskEntries.map((it) => it.taskEntries).toList();
}
}
class EntriesWidget extends StatefulWidget {
EntriesWidget({Key key}) : super(key: key);
@override
EntriesWidgetState createState() => EntriesWidgetState();
}
class EntriesWidgetState extends State<EntriesWidget> {
List<EntryCard> entryCardList = [];
int count = 0;
List<GlobalKey<EntryCardState>> keyForm = [];
int keyFormIndex = -1;
void removeEntryCard(index, EntryCard) {
print("inside remove function ${index}");
keyFormIndex = keyFormIndex - 1;
var pos = entryCardList.indexOf(EntryCard);
print("pos $pos");
setState(() {
entryCardList.removeAt(pos);
keyForm.removeAt(pos);
// index ;
});
}
void addEntryCard() {
setState(() {
keyForm.add(GlobalKey<EntryCardState>());
keyFormIndex = keyFormIndex 1;
entryCardList.add(
EntryCard(
removeEntryCard,
key: keyForm[keyFormIndex],
index: entryCardList.length,
taskEntry: TaskEntry(),
),
);
});
}
@override
void initState() {
// addEntryCard(); //Initialize with 1 item
super.initState();
}
@override
Widget build(BuildContext context) {
return Material(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('1. HRD Timesheet (Systems)', style: kDefaultTitleStyle),
GestureDetector(
onTap: addEntryCard,
child: Chip(
label: Text(' Add Task'),
backgroundColor: Colors.grey,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
),
],
),
SizedBox(height: 10.0),
Container(
decoration: BoxDecoration(
border: Border.all(color: kPrimaryAppColor),
),
child: Padding(
padding: const EdgeInsets.all(6.0),
child: Column(
children: [
ListView(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: [
...entryCardList,
],
),
],
),
),
),
],
),
);
}
void saveForm2() {
keyForm.forEach((element) {
element.currentState.saveForm();
});
print("inside save form");
// if (formKey.currentState.validate()) {
// formKey.currentState.save();
// print(widget.taskEntry.taskName);
// print(widget.taskEntry.taskHours);
// }
}
}
class EntryCard extends StatefulWidget {
final TaskEntry taskEntry;
final int index;
final Function(int, EntryCard) removeEntryCard;
// final TextEditingController hours;
// final TextEditingController task;
const EntryCard(this.removeEntryCard,
{Key key, @required this.index, this.taskEntry})
: super(key: key);
void remove(int entryIndex) {
print("Called remove on $entryIndex" this.hashCode.toString());
removeEntryCard(entryIndex, this);
}
@override
EntryCardState createState() {
return EntryCardState(index, remove);
}
}
class EntryCardState extends State<EntryCard> {
final int entryIndex;
final Function remove;
final formKey = GlobalKey<FormState>();
EntryCardState(this.entryIndex, this.remove);
@override
Widget build(BuildContext context) {
return Form(
key: formKey,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: TextFormField(
// initialValue: widget.user.fullName,
onSaved: (val) => widget.taskEntry.taskHours = val,
validator: (val) => val.length > 1 ? null : 'Invalid Field',
// controller: widget.hours,
decoration: InputDecoration(
hintText: "Hours ${widget.index}",
isDense: true,
// border: OutlineInputBorder(),
),
),
),
SizedBox(width: 5.0),
Expanded(
child: TextFormField(
onSaved: (val) => widget.taskEntry.taskName = val,
validator: (val) => val.length > 1 ? null : 'Invalid Field',
// controller: widget.task,
decoration: InputDecoration(
hintText: "Task Name ${widget.index}",
// border: OutlineInputBorder(),
isDense: true,
),
),
),
IconButton(
icon: Icon(Icons.remove),
color: kPrimaryAppColor,
onPressed: () {
widget.remove(entryIndex);
},
)
],
),
SizedBox(height: 5.0),
// TextFormField(
// decoration: InputDecoration(
// hintText: "This is Remarks ${index}",
// border: O`utlineInputBorder(),
// ),
// ),
// SizedBox(height: 10.0),
],
),
);
}
void saveForm() {
print("inside save form");
if (formKey.currentState.validate()) {
formKey.currentState.save();
print(widget.taskEntry.taskName);
print(widget.taskEntry.taskHours);
}
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AddTimesheet(),
);
}
}
Комментарии:
1. Спасибо @ chunhunghan код работает нормально. но я получаю случайную ошибку диапазона, когда пытаюсь удалить последнюю строку (если у меня 3-4 строки) RangeError (index): Недопустимое значение: не входит в инклюзивный диапазон 0 .. 1: -1 можете ли вы направить меня сюда, когда у вас будет время?
2. Я обновил полный код, ошибка исправлена. при выполнении entryCardList.add вам не нужно передавать индекс. при использовании RemoveAt. проверьте позицию с помощью var pos = entryCardList.indexOf(EntryCard);
3. Спасибо за ваше время, я реализую его сегодня и обновлю здесь.
4. ценю ваше время, оно работает так, как ожидалось, я много работал над этим в течение 3 недель.
5. Рад помочь. пожалуйста, отметьте это как ответ, если это вам поможет. Спасибо.