在 flutter datatable 的数据源中使用 getx 而不是有状态的小部件

Question

我尝试在flutter的Datatable DataSource中使用Getx动态更改rowCount，但是当我用obx包围它时它并没有改变。如果我检查 ever()，数据源更改本身会被正确检测到，但屏幕由于某种原因没有更新。毕竟，我通过使用有状态的小部件成功地进行了动态更改，但是有谁知道如何使用 getx 做到这一点吗？

使用 getx:


class _MyDataTable extends StatelessWidget {
  _MyDataTable() {
    ever(dataSource, (_) => print("dataSource changed"));
  }
  final dataSource = _DataSource().obs;

  List<DataColumn> _dataColumList = [
    DataColumn(label: Icon(Icons.star)),
    DataColumn(label: Text("aaaa")),
    DataColumn(label: Text("bbbb")),
    DataColumn(label: Text("cccc")),
    DataColumn(label: Text("dddd")),
  ];
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Column(
      children: [
        SizedBox(
            width: double.infinity,
            child: Obx(() => PaginatedDataTable(
                rowsPerPage: 50,
                columns: [
                  for (var i in _selectedIndexs) _dataColumList[i],
                ],
                source: dataSource.value))),//change of dataSource will not update view.
        ElevatedButton(
            onPressed: () {
              // dataSource.value.changeRowCount();
              dataSource.update((dataSource) {
                dataSource!._rowCount++;
              });
            },
            child: Obx(() => Text(
                "change row count"))),
      ],
    ));
  }
}

class _DataSource extends DataTableSource {
  int _rowCount = 50;

  @override
  DataRow getRow(int index) {
    List<DataCell> dataCellList = [
      DataCell(
         .........
      )),
    ];

    /// 1行文のデータ
    return DataRow(cells: [
      for (var i in _selectedIndexs) dataCellList[i],
    ]);
  }

  @override
  int get rowCount => _rowCount;
  @override
  bool get isRowCountApproximate => false; 
  @override
  int get selectedRowCount => 0;
}

有状态的小部件（正常工作）



class _MyDataTableState extends State<MyDataTable> {
  final GlobalController global = Get.find();
  var dataSource = new _DataSource();

  List<DataColumn> _dataColumList = [
    DataColumn(label: Icon(Icons.star)),
    DataColumn(label: Text("aaaa")),
    DataColumn(label: Text("bbbb")),
    DataColumn(label: Text("cccc")),
    DataColumn(label: Text("dddd")),
  ];

  @override
  Widget build(BuildContext context) {
    return Obx(() => SingleChildScrollView(
            child: Column(
          children: [
            SizedBox(
                width: double.infinity,
                child: PaginatedDataTable(
                    rowsPerPage: 50,
                    columns: [
                      for (var i in _selectedIndexs) _dataColumList[i],
                    ],
                    source: dataSource)),
            MaterialButton(
              onPressed: () {
                setState(() {
                  dataSource.changeRowCount();
                });
              },
              child: Text(
                'change row count',
              ),
            ),
          ],
        )));
  }
}

class _DataSource extends DataTableSource {
  int _rowCount = 50;
  void changeRowCount() {
    _rowCount++;
    notifyListeners();
  }

  @override
  DataRow getRow(int index) {
    List<DataCell> dataCellList = [
      DataCell(
         .........
      )),
    ];

    /// 1行文のデータ
    return DataRow(cells: [
      for (var i in _selectedIndexs) dataCellList[i],
    ]);
  }

  @override
  int get rowCount => _rowCount;
  @override
  bool get isRowCountApproximate => false; 
  @override
  int get selectedRowCount => 0;
}

Answer 1

在您的“ElevatedButton”上：

onPressed: () {
          dataSource._rowCount++;
          var ds = dataSource;
          dataSource.value = ds;
        },

Answer 2

最后，我通过这样做成功更新了视图：


      var newDataSource = _DataSource();
      newDataSource._rowCount = 100;
      dataSource.value = newDataSource;

在 flutter datatable 的数据源中使用 getx 而不是有状态的小部件

use getx in flutter datatable's datasource instead of stateful widget

flutter

dart

flutter-getx

statefulwidget