Question

我用Flutter制作了一个数据表，如下所示：

代码如下：

DataTable(
  columns: [
    DataColumn(
      label: Text('UID'),
      numeric: false,
      tooltip: "User ID",
    ), 
    DataColumn(
      label: Text('Name'),
      numeric: false,
      tooltip: "User Name",
    ),
    DataColumn(
      label: Text('Placeholder'),
      numeric: false,
      tooltip: "Placeholder",
    ),
  ], 
  rows: users.map(
    (user) => DataRow(
      cells: [
        DataCell(
          Text(user.uid),
          onTap: () {
            print('Clicked on: ${user.uid} : ${user.name}');
          },
        ),
        DataCell(
          Text(user.name)
        ),
        DataCell(
          Text('Placeholder')
        ),
      ]
    ),
  ).toList(),
),

那么有可能获得子行吗？这是一个示例：https://datatables.net/examples/server_side/row_details.html

因此，我希望如果您单击某一行，则会出现一个子行，其中包含更多信息（以及将来的按钮）。

有帮助吗？预先感谢！

Answer 1

如何创建一个详细页面，然后执行以下操作

DataTable(
  columns: [
    DataColumn(
      label: Text('UID'),
      numeric: false,
      tooltip: "User ID",
    ), 
    DataColumn(
      label: Text('Name'),
      numeric: false,
      tooltip: "User Name",
    ),
    DataColumn(
      label: Text('Placeholder'),
      numeric: false,
      tooltip: "Placeholder",
    ),
  ], 
  rows: users.map(
    (user) => DataRow(
      cells: [
        DataCell(
          Text(user.uid),
          onTap: () {
            print('Clicked on: ${user.uid} : ${user.name}');
          },
        ),
        DataCell(
          Text(user.name)
        ),
        DataCell(
          Row(
            children:<Widget> [
             IconButton(
    icon: Icon(Icons.arrow_right),
    tooltip: 'Show Details',
    onPressed: () {
      Navigator.push(detailapage,argument: user);
    },
  ),Text('Placeholder'),

           ]),
        ),
      ]
    ),
  ).toList(),
),

Flutter-数据表-子行-行详细信息

1 个答案: