flutter - Flutter - 如何通过从 TextField 中获取值将行添加到 PaginatedDataTable?
问题描述
我想在用户输入他们的信息并按下按钮后添加一行。现在,当我按下按钮时,一个对象被添加到User
列表中,但PaginatedDataTable
没有更新以显示该行已被添加。
import 'package:flutter/material.dart';
TextEditingController firstNameController = TextEditingController();
TextEditingController lastNameController = TextEditingController();
class UserDataTable extends StatefulWidget {
const UserDataTable({Key key}) : super(key: key);
@override
_UserDataTableState createState() => _UserDataTableState();
}
class _UserDataTableState extends State<UserDataTable> {
int _rowsPerPage = PaginatedDataTable.defaultRowsPerPage;
var dataSource = new CustomerDataSource();
@override
void initState() {
super.initState();
}
void dispose() {
firstNameController.dispose();
lastNameController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'First Name',
),
controller: firstNameController,
),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Last Name',
),
controller: lastNameController,
),
MaterialButton(
color: Color.fromRGBO(163, 22, 0, 100),
minWidth: 200,
onPressed: () {
setState(() {
dataSource.addRow(0);
firstNameController.clear();
lastNameController.clear();
});
},
child: Text(
'Add User',
style: TextStyle(color: Colors.white),
),
),
PaginatedDataTable(
header: const Text('Users'),
rowsPerPage: _rowsPerPage,
availableRowsPerPage: const <int>[5, 10, 20],
onRowsPerPageChanged: (int value) {
setState(() {
_rowsPerPage = value;
});
},
columns: tableColumns,
source: dataSource,
),
],
),
);
}
}
const tableColumns = <DataColumn>[
DataColumn(label: Text('FirstName')),
DataColumn(
label: Text('LastName'),
),
];
class User {
User(
this.firstName,
this.lastName,
);
final String firstName;
final String lastName;
bool selected = false;
}
class CustomerDataSource extends DataTableSource {
int _selectedCount = 0;
final List<User> users = <User>[];
@override
DataRow getRow(int index) {
assert(index >= 0);
if (index >= users.length) return null;
final User user = users[index];
return DataRow.byIndex(index: index, cells: <DataCell>[
DataCell(Text(firstNameController.text = user.firstName)),
DataCell(Text(lastNameController.text = user.lastName)),
]);
}
void addRow(int index) {
users.add(User(firstNameController.text, lastNameController.text));
}
@override
int get rowCount => users.length;
@override
bool get isRowCountApproximate => false;
@override
int get selectedRowCount => _selectedCount;
}
解决方案
notifyListeners();
我错过了方法中的通知addRow()
。notifyListeners();
我在这个答案中添加了更新的代码。
import 'package:flutter/material.dart';
TextEditingController firstNameController = TextEditingController();
TextEditingController lastNameController = TextEditingController();
class UserDataTable extends StatefulWidget {
const UserDataTable({Key key}) : super(key: key);
@override
_UserDataTableState createState() => _UserDataTableState();
}
class _UserDataTableState extends State<UserDataTable> {
int _rowsPerPage = PaginatedDataTable.defaultRowsPerPage;
var dataSource = new CustomerDataSource();
@override
void initState() {
super.initState();
}
void dispose() {
firstNameController.dispose();
lastNameController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'First Name',
),
controller: firstNameController,
),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Last Name',
),
controller: lastNameController,
),
MaterialButton(
color: Color.fromRGBO(163, 22, 0, 100),
minWidth: 200,
onPressed: () {
setState(() {
dataSource.addRow(0);
firstNameController.clear();
lastNameController.clear();
});
},
child: Text(
'Add User',
style: TextStyle(color: Colors.white),
),
),
PaginatedDataTable(
header: const Text('Users'),
rowsPerPage: _rowsPerPage,
availableRowsPerPage: const <int>[5, 10, 20],
onRowsPerPageChanged: (int value) {
setState(() {
_rowsPerPage = value;
});
},
columns: tableColumns,
source: dataSource,
),
],
),
);
}
}
const tableColumns = <DataColumn>[
DataColumn(label: Text('FirstName')),
DataColumn(
label: Text('LastName'),
),
];
class User {
User(
this.firstName,
this.lastName,
);
final String firstName;
final String lastName;
bool selected = false;
}
class CustomerDataSource extends DataTableSource {
int _selectedCount = 0;
final List<User> users = <User>[];
@override
DataRow getRow(int index) {
assert(index >= 0);
if (index >= users.length) return null;
final User user = users[index];
return DataRow.byIndex(index: index, cells: <DataCell>[
DataCell(Text(user.firstName)),
DataCell(Text(user.lastName)),
]);
}
void addRow(int index) {
users.add(User(firstNameController.text, lastNameController.text));
notifyListeners();
}
@override
int get rowCount => users.length;
@override
bool get isRowCountApproximate => false;
@override
int get selectedRowCount => _selectedCount;
}
推荐阅读
- vsto - 如何使用 EWS 或 Outlook API 获取电子邮件文件夹所有者?
- c# - 部署 c# .net core aws lambda 函数时出错
- c# - ASP.NET HTTP PUT 和 DELETE 产生 404 状态
- python - Python和Arduino的来回通信问题
- angular - 未触发 PUT 请求(POST 和 GET 工作)
- c# - 如何使 C# 脚本按特定顺序执行?
- sql - 在同一个表中的 SQL Server 中将数据从一行复制到另一行
- mysql - 具有 MAX 日期的内部联接查询仍返回多个日期值
- c# - 如何在验证表单的同时将文件输出到视图?
- acumatica - 如何将库存可用性状态添加到自定义网格,如 SO301000