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()方法中缺少notify 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;
}