点击铅笔图标后,表格中会填充相应的字段数据。但是,当我进行更改时,列表数据不会发生更改。此外,当我点击删除按钮(目前不知道)时,如何从列表中删除相应的数据。
我想在单击“编辑”按钮后得到此输出。有什么方法可以做到这一点?
这是我的准则。
import 'package:flutter/material.dart';
import 'package:table/model.dart';
class Episode5 extends StatefulWidget {
@override
_Episode5State createState() => _Episode5State();
}
class _Episode5State extends State<Episode5> {
TextEditingController nameController = TextEditingController();
TextEditingController emailController = TextEditingController();
final form = GlobalKey<FormState>();
static var _focusNode = new FocusNode();
bool update = false;
User user = User();
List<User> userList = [
User(name: "a", email: "a"),
User(name: "d", email: "b"),
User(name: "c", email: "c"),
];
@override
Widget build(BuildContext context) {
Widget bodyData() => DataTable(
onSelectAll: (b) {},
sortColumnIndex: 0,
sortAscending: true,
columns: <DataColumn>[
DataColumn(label: Text("Name"), tooltip: "To Display name"),
DataColumn(label: Text("Email"), tooltip: "To Display Email"),
DataColumn(label: Text("Update"), tooltip: "Update data"),
DataColumn(label: Text("Delete"), tooltip: "Delete data"),
],
rows: userList
.map(
(name) => DataRow(
cells: [
DataCell(
Text(name.name),
),
DataCell(
Text(name.email),
),
DataCell(
IconButton(
onPressed: () {
_updateTextControllers(name); // new function here
},
icon: Icon(
Icons.edit,
color: Colors.black,
),
),
),
DataCell(
IconButton(
onPressed: () =>
_deleteTextControllers(name), // new function here
icon: Icon(
Icons.delete,
color: Colors.black,
),
),
),
],
),
)
.toList(),
);
return Scaffold(
appBar: AppBar(
title: Text("Data add to List Table using Form"),
),
body: Container(
child: Column(
children: <Widget>[
bodyData(),
Padding(
padding: EdgeInsets.all(10.0),
child: Form(
key: form,
child: Container(
child: Column(
children: <Widget>[
TextFormField(
controller: nameController,
focusNode: _focusNode,
keyboardType: TextInputType.text,
autocorrect: false,
onSaved: (String value) {
user.name = value;
},
maxLines: 1,
validator: (value) {
if (value.isEmpty) {
return 'This field is required';
}
return null;
},
decoration: new InputDecoration(
labelText: 'Name',
hintText: 'Name',
labelStyle: new TextStyle(
decorationStyle: TextDecorationStyle.solid),
),
),
SizedBox(
height: 10,
),
TextFormField(
controller: emailController,
keyboardType: TextInputType.text,
autocorrect: false,
maxLines: 1,
validator: (value) {
if (value.isEmpty) {
return 'This field is required';
}
return null;
},
onSaved: (String value) {
user.email = value;
},
decoration: new InputDecoration(
labelText: 'Email',
hintText: 'Email',
labelStyle: new TextStyle(
decorationStyle: TextDecorationStyle.solid)),
),
SizedBox(
height: 10,
),
Column(
// crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextButton(
child: Text("Add"),
onPressed: () {
if (validate() == true) {
form.currentState.save();
addUserToList(
user.name,
user.email,
);
clearForm();
}
},
),
TextButton(
child: Text("Update"),
onPressed: () {
if (validate() == true) {
form.currentState.save();
updateForm(user);
clearForm();
}
},
),
],
),
),
],
),
],
),
),
),
),
],
),
),
);
}
void updateForm(User user) {
setState(() {
//Code to update the list after editing
});
}
void _updateTextControllers(User user) {
setState(() {
nameController.text = user.name;
emailController.text = user.email;
});
}
void _deleteTextControllers(User user) {
setState(() {
//How to delete the list data on clicking Delete button?
});
}
void addUserToList(name, email) {
setState(() {
userList.add(User(name: name, email: email));
});
}
clearForm() {
nameController.clear();
emailController.clear();
}
bool validate() {
var valid = form.currentState.validate();
if (valid) form.currentState.save();
return valid;
}
}
2条答案
按热度按时间yfjy0ee71#
有关dart中List方法的更多信息:https://api.dart.dev/stable/2.12.3/dart-core/List-class.html
pqwbnv8z2#
就我个人而言,我不建议通过改变数据来避免渲染问题,然而,这是我的解决方案:
1.变更用户数据:(不推荐)
1.无法改变用户数据,因为具有最终值(推荐)