Flutter语言 - 如何通过从TextField中获取值来添加PaginatedDataTable行?

Question

我想在用户输入信息并按下按钮后添加一行。现在，当我按下按钮时，一个对象被添加到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;
}

Answer 1

我在addRow()方法中缺少通知notifyListeners();。我将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;
}