代码之家 › 专栏 › 技术社区 › ufk

如何使用PaginatedDataable在列、字段和行上正确实现单击事件

flutter dart

ufk · 技术社区 · 7 年前

我是个新手,所以这是我的第一个应用(耶!!!)

一般来说,我试图创建一个包含两行静态数据的表。因为我是一个初学者,所以我决定开始玩:)

我使用 PaginatedDataTable DataTableSource 用于表的数据源。

onTap

这是我的 Widget 函数,该函数返回PaginatedDataable组件

Widget searchPageTable()  {
  int _rowsPerPage = PaginatedDataTable.defaultRowsPerPage;
  final List<DataColumn> _columns = new List<DataColumn>();
  _columns.add(new DataColumn(label: Text("col1"),onSort: onSort));
  _columns.add(new DataColumn(label: Text("col2"),onSort: onSort));
  _columns.add(new DataColumn(label: Text("col3"),onSort: onSort));
  return new PaginatedDataTable(header: Text("header"),
      columns: _columns,
      rowsPerPage: _rowsPerPage,
    source: new MyDataSource(),
  );
}

onSort() 函数(现在是一个空函数),但我知道我可以在单击列标题时捕获并正确实现它。继续。。

我的数据源是用以下代码实现的;

class MyDataSource extends DataTableSource {

  cellTapped() {

  }

  @override
  DataRow getRow(int index) {
    if (index == 0) {
      final List<DataCell> row = new List<DataCell>();
      row.add(new DataCell(Text("col1txt"),onTap: cellTapped));
      row.add(new DataCell(Text("col2txt"),onTap: cellTapped));
      row.add(new DataCell(Text("col3txt"),onTap: cellTapped));
      return new DataRow(cells: row);
    } else if (index == 1) {
      final List<DataCell> row = new List<DataCell>();
      row.add(new DataCell(Text("col1txt2"),onTap: cellTapped));
      row.add(new DataCell(Text("col2txt2"),onTap: cellTapped));
      row.add(new DataCell(Text("col3txt2"),onTap: cellTapped));
      return new DataRow(cells: row);
    } else {
      return null;
    }
  }

  @override
  int get selectedRowCount {
    return 0;
  }

  @override
  bool get isRowCountApproximate {
    return false;
  }

  @override
  int get rowCount {
    return 2;
  }
}

DataRow 在它的每一列中 DataCell onTap

每当我点击一个空行时,我会得到以下异常:

flutter: âââ¡ EXCEPTION CAUGHT BY GESTURE ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ
flutter: The following NoSuchMethodError was thrown while handling a gesture:
flutter: The method 'call' was called on null.
flutter: Receiver: null
flutter: Tried calling: call(true)
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0      Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:50:5)
flutter: #1      DataTable.build.<anonymous closure> (package:flutter/src/material/data_table.dart:586:38)
flutter: #2      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:507:14)
flutter: #3      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:562:30)
flutter: #4      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:102:24)
flutter: #5      TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:242:9)
flutter: #6      TapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:175:7)
flutter: #7      PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:315:9)
flutter: #8      PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:73:12)
flutter: #9      PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:101:11)
flutter: #10     _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:180:19)
flutter: #11     _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:158:22)
flutter: #12     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:138:7)
flutter: #13     _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:101:7)
flutter: #14     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:85:7)
flutter: #15     _invoke1 (dart:ui/hooks.dart:168:13)
flutter: #16     _dispatchPointerDataPacket (dart:ui/hooks.dart:122:5)
flutter:
flutter: Handler: onTap
flutter: Recognizer:
flutter:   TapGestureRecognizer#a6733(debugOwner: GestureDetector, state: possible, won arena, finalPosition:
flutter:   Offset(209.0, 375.5), sent tap down)
flutter: ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ

一般来说,这里我只想忽略空行上的单击事件。如何实现这一点?

请提供有关此问题的任何信息。

谢谢:)

1 回复 | 直到 7 年前

dragonfly02 7 年前

第一个问题:“每页的默认行数设置为10,所以即使我有两行数据,它也会显示2行和8行空行,这是默认行为吗?可能不会,我错过了一些东西:)”

这是因为在你的 getRow null index > 1 因此,例外情况也是意料之中的。实际上,您不希望硬编码数据源,并根据数据源的行数按比例设置每页的行数。例如,如果您知道数据源将以100行开始,那么您可以将每个页面设置为10行或20行。理想情况下,应根据数据源更新动态构建页面,以避免页面中出现空行。但这个例外不会使你的应用程序崩溃,如果你想简化事情,在某种程度上可以忽略它。

关于处理问题的最后一个问题 onTap 每行的。

我假设您希望对所选行执行某些操作,例如,您可以根据是否选择了任何行来启用/禁用某些按钮。请注意,有一个 actions 属性(类型) List<Widget> PaginatedDataTable 你可以放一些按钮或其他你想要的小部件。我这样做的方式是通过传入事件处理程序(例如 onRowSelected 它只是一个函数,不带任何参数,也不返回任何内容) MyDataSource onSelectedChanged 内部处理程序 格特罗 函数,其中返回 DataRow . 这是我给你一个具体想法的一个例子:

class OrderSource extends DataTableSource {
  int _selectedCount = 0;
  final List<Order> _orders;
  final Function onRowSelected;
  OrderSource(this._orders, this.onRowSelected);

  @override
  DataRow getRow(int index) {
    assert(index >= 0);
    if (index >= _orders.length) return null;
    final Order order = _orders[index];
    return DataRow.byIndex(
        index: index,
        selected: order.selected,
        onSelectChanged: (bool value) {
          if (order.selected != value) {
            _selectedCount += value ? 1 : -1;
            assert(_selectedCount >= 0);
            order.selected = value;
            notifyListeners();
            onRowSelected();
            //print('selected rows: $selectedRowCount');
          }
        },
        cells: <DataCell>[
          DataCell(Text('${order.orderID}')),
          DataCell(Text('${order.side}')),
          ...),
        ]);
  }
}

希望这有帮助。