Question

我正在使用Flutter DataTables显示购物车中的项目列表。现在，我要编辑任何选定行的数量。有没有办法获取用户点击的行的信息？

以下是我的数据表的完整代码：

class _DataTableSampleState extends State<DataTableSample> {

  void _getSelectedRowInfo() {
    print('Selected Item Row Name Here...')
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataTable Sample'),
      ),
      body: Container(
        child: DataTable(
          onSelectAll: (b) {},
          sortAscending: true,
          columns: <DataColumn>[
            DataColumn(
              label: Text('Item'),
            ),
            DataColumn(
              label: Text('Price'),
            ),
          ],
          rows: items
              .map(
                (itemRow) => DataRow(
                      cells: [
                        DataCell(
                          Text(itemRow.itemName),
                          showEditIcon: false,
                          placeholder: false,
                        ),
                        DataCell(
                          Text(itemRow.itemPrice),
                          showEditIcon: true,
                          placeholder: false,
                          onTap: _getSelectedRowInfo,
                        ),
                      ],
                    ),
              )
              .toList(),
        ),
      ),
    );
  }
}

class ItemInfo {
  String itemName;
  String itemPrice;

  ItemInfo({
    this.itemName,
    this.itemPrice,
  });
}

var items = <ItemInfo>[
  ItemInfo(
    itemName: 'Item A',
    itemPrice: '250',
  ),
  ItemInfo(
    itemName: 'Item B',
    itemPrice: '100',
  ),
  ItemInfo(
    itemName: 'Item C',
    itemPrice: '150',
  ),
];

单击编辑图标时，将调用“ _getSelectedRowInfo”方法。我想在此功能中获取所选行/点击行的完整详细信息。

Answer 1

尝试一下：

DataTable(
    showCheckboxColumn: false, // <-- this is important
    columns: [
        DataColumn(label: Text('FirstName')),
         DataColumn(label: Text('LastName')),
    ],
     rows:[
        DataRow(
            cells: [
                DataCell(Text(obj['user1'])),
                DataCell(Text(obj['name-a'])),
            ],
            onSelectChanged: (newValue) {
                print('row 1 pressed');
            },
        ),
        DataRow(
            cells: [
                DataCell(Text(obj['user2'])),
                DataCell(Text(obj['name-b'])),
            ],
            onSelectChanged: (newValue) {
                print('row 2 pressed');
            },
        ),
    ]
),

希望这会有所帮助。谢谢

Answer 2

您可以使用DataRow中的onSelectChanged属性。

rows: items
    .map(
        (itemRow) => DataRow(
            onSelectChanged: (bool selected) {
                if (selected) {
                    log.add('row-selected: ${itemRow.index}');
                }
            },
            cells: [
                // ..
            ],
        ),

Answer 3

要添加到@Samuel提供的答案中，还可以隐藏复选框。您需要创建自己的DataTable Widget副本。您可以按照以下步骤操作：

在项目中创建名为my_data_table.dart的新文件
将源从https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/data_table.dart复制到my_data_table.dart

MyDataTable

替换所有 DataTable 。
在文件中用 MyDataRow 替换所有 DataRow
在文件中用 MyDataCell 替换所有 DataCell
在文件中用 MyDataColumn 替换所有 DataColumn
现在在 MyDataTable 类中找到构建方法，并将文本为“ final bool showCheckboxColumn = rows.any((MyDataRow row) => row.onSelectChanged != null);”的文件更改为"final bool showCheckboxColumn = false;"，将文本为“ "final bool allChecked = showCheckboxColumn && !rows.any((MyDataRow row) => row.onSelectChanged != null && !row.selected);"”的文件更改为"final bool allChecked = false;"
现在在文件中，您使用过 DataTable ，导入文件 my_data_table.dart ，并将 DataTable 替换为 MyDataTable strong>，带有 MyDataColumn 的 DataColumn ，带有 MyDataRow 的 DataRow 和带有的 DataCell > MyDataCell 。您的onSelectChanged应该仍然可以正常工作，而无需显示任何复选框。

Answer 4

我相信我知道您想要在这里实现什么。您希望能够确定事件的来源。但是到目前为止，还没有已知的方法可以将分配给 DataTable 小部件的 onTap 属性的回调函数确定。因此，我冒昧地继续修改源代码，以便将回调函数设置为接收类似于Java中 ActionListener 的工作方式的参数。最后，它看起来像这样：

onTap:(index){
 //the variable index helps determine the source of the event
             }

另外，你不必须禁用或取消选中该复选框。
请按照下列步骤操作：

1。在您的项目中创建一个名为“ custom_data_table.dart ”的新文件。

2复制原始“ data_table.dart ”文件中的所有内容，可以从此文件中获取链接https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/data_table.dart 到“ custom_data_table.dart”文件。

3。将 DataTable ， DataRow 和 DataColumn 的所有实例替换为 CustomDataTable ，分别 CustomDataRow 和 CustomDataColumn 。

4。确保具有所有这些导入语句：

将'dart：math'导入为数学；

导入“ package：flutter / foundation.dart”；

导入“ package：flutter / rendering.dart”；

导入“ package：flutter / widgets.dart”；

导入“ package：flutter / material.dart”；

5。添加此语句 const double kMinInteractiveDimension = 48.0;

（应将其定义为全局变量，并且不应在任何类内定义。）

6。对 CustomDataCell 类进行以下更改：

class CustomDataCell {

      this.child, {
        this.idTag, //Add this statement


      }) : assert(child != null);


  final int idTag; //Add this statement



  final ValueSetter<int> onTap; // this instead of final VoidCallback onTap;  


}

7。对 CustomDataTable 类

进行以下更改

    class CustomDataTable extends StatelessWidget {

                   Widget build(BuildContext context){

                        for (int dataColumnIndex = 0; dataColumnIndex <columns.length;dataColumnIndex += 1) {
                              for (CustomDataRow row in rows) {

                                   tableRows[rowIndex].children[displayColumnIndex] = 
                                     _buildDataCell(


                                          onTap:()=> cell.onTap!=null?cell.onTap(cell.idTag):null,//this instead of onTap: cell.onTap,


                                                    );
                                                  rowIndex += 1;
                                                              }
                                                  displayColumnIndex += 1;
                                                                                                            }

                                                      }
                                                     }

现在，您可以通过以下方式实例化CustomDataCell对象：

new CustomDataCell(
  idTag: // pass it some value that will uniquely identify it
  onTap:(value){
 //the same value that you passed to it as idTag
               }
                  ),

Answer 5

每个DataCell都有一个onTap回调。您可以在表格行上没有出现不可隐藏的复选框的情况下使用此功能。例如

DataCell(Text(itemrow.itemname),
      onTap: () {
// Your code here
})

这对我有用。如果您希望onTap为整个DataRow工作，而不是只为DataCell工作，则可以将逻辑添加到每个onTap的{{1}}中，然后得到预期的结果。

Flutter DataTable-点击行

5 个答案: