Flutter DataTable - 点击行

Posted 2023-05-07

【中文标题】Flutter DataTable - 点击行

【英文标题】：Flutter DataTable - Tap on row

【发布时间】：2018-11-07 13:42:21

【问题描述】：

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

以下是我的 DataTable 的完整代码：

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”方法。我想在此函数中获取所选/点击行的完整详细信息。

【参考方案1】：

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

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

【讨论】：

谢谢它的工作。但是有什么办法可以隐藏复选框吗？

要隐藏复选框，您只需在数据表定义中添加属性 showCheckboxColumn: false。

【参考方案2】：

试试这个：

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');
            ,
        ),
    ]
),

希望这会有所帮助。谢谢

【参考方案3】：

每个DataCell 都有一个onTap 回调。您可以在表格行上不显示不可隐藏复选框的情况下使用它。 例如

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

这对我有用。如果您希望 onTap 为整个 DataRow 而不仅仅是 DataCell 工作，您只需将逻辑添加到每个 DataCell 的 onTap 并获得所需的结果。

【参考方案4】：

您可以通过使用 closure 来完成它，这是一个可以访问其词法范围内的变量并基本上“记住”它们的函数对象。

将 DataCell 的 'onTap' 属性更改为：

onTap: ()_getSelectedRowInfo(itemRow.itemName,itemRow.itemPrice);,

并修改 _getSelectedRowInfo 函数以适应以下更改：

void _getSelectedRowInfo(dynamic name,dynamic price) 
    print('Name:$name  price: $price');
  

这是整个事情的样子：

class _DataTableSampleState extends State<DataTableSample> 

  void _getSelectedRowInfo(dynamic name,dynamic price) 
    print('Name:$name  price: $price');
  

  @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(itemRow.itemName,itemRow.itemPrice);,
                ),
              ],
            ),
          )
              .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',
  ),
];

【参考方案5】：

对任何想知道如何在最新版本的颤振上做到这一点的人进行小修正。它接受 bool? selected 而不是 bool selected。这是由于新的空安全值语法。确保即使由于某种原因没有渲染该行，数据表仍然可以正常工作。