如何在Flutter中使数据列可点击?

7uzetpgm  于 2023-01-06  发布在  Flutter
关注(0)|答案(2)|浏览(247)

我想使一个数据列可点击,这样当用户点击它,一个覆盖打开。我已经尝试添加一个图标按钮,但我不工作。有人知道如何在flutter中正确地做到这一点吗?
代码:

SizedBox(
              height: 500,
              width: double.infinity,
              child: DataTable2(
                minWidth: 600,
                columnSpacing: defaultPadding,
                columns: const [
                  DataColumn(
                    IconButton( <------------- This doesn't work
                      icon: Icons.abs,
                      onPressed: () {},
                    ),
                    label: Text("Car ID"),
                  ),
                  DataColumn(label: Text("Date")),
                  DataColumn(label: Text("Avg. Speed")),
                  DataColumn(label: Text("Video File")),
                ],
                rows: List.generate(demoRecentFiles.length,
                    (index) => recentFileDataRow(demoRecentFiles[index])),
              )),
k2fxgqgv

k2fxgqgv1#

要使数据列可单击,只需使用GestureDetector()小部件 Package 标签。

DataColumn(
          label: Expanded(
            child: GestureDetector(onTap: (){
              print('Hey');
            }, child: Text(
              'Name',
              style: TextStyle(fontStyle: FontStyle.italic),
            )),
          )
          ,
        ),
gojuced7

gojuced72#

DataColumnlabel属性以及DataRowDataCell的位置参数可以是任何小部件。因此,请随意使用此处的任何可单击小部件。下面是您希望的IconButton的工作代码段。您可以在Dartpad中尝试。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: <DataColumn>[
        DataColumn(
          label: Expanded(
            child: IconButton(
              icon: const Icon(Icons.favorite),
              onPressed: () {
                showDialog<void>(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: const Text('It works'),
                      actions: <Widget>[
                        TextButton(
                          child: const Text('Ok'),
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                        ),
                      ],
                    );
                  },
                );
              },
            ),
          ),
        ),
      ],
      rows: const <DataRow>[
        DataRow(
          cells: <DataCell>[
            DataCell(Text('1')),
          ],
        ),
        DataRow(
          cells: <DataCell>[
            DataCell(Text('2')),
          ],
        ),
      ],
    );
  }
}

相关问题