Flutter 数据表 select 行

Question

我在 flutter 中遇到了 DataTable 的问题。当用户单击其中一个时，我想更改行的状态，但我发现如何使用 selected: true 在 DataRow.

中“手动”执行此操作

如何通过更改状态让用户 select 仅一行，而删除 select 其余行？

content: Column(
               children: <Widget>[
                 DataTable(
                   columns: [
                     DataColumn(label: Text('Language')),
                     DataColumn(label: Text('Translation')),
                   ],
                   rows: [
                     DataRow(selected: true, cells: [
                       DataCell(
                         Text(
                           "RO",
                           textAlign: TextAlign.left,
                           style: TextStyle(fontWeight: FontWeight.bold),
                         ),
                         onTap: () {
                           setState(() {
                             color = Colors.lightBlueAccent;

                           });
                         },
                       ),
                       DataCell(
                         TextField(
                           decoration: InputDecoration(
                               border: InputBorder.none, hintText: 'paine'),
                         ),
                       ),
                     ]),
                     DataRow(cells: [
                       DataCell(
                           Text(
                             "EN",
                             textAlign: TextAlign.left,
                             style: TextStyle(fontWeight: FontWeight.bold),
                           ), onTap: () {
                         print('EN is clicked');
                       }),
                       DataCell(
                         TextField(
                           decoration: InputDecoration(
                               border: InputBorder.none, hintText: 'bread'),
                         ),
                       ),
                     ]),
                     DataRow(cells: [
                       DataCell(
                           Text(
                             "FR",
                             textAlign: TextAlign.left,
                             style: TextStyle(fontWeight: FontWeight.bold),
                           ), onTap: () {
                         print('FR is clicked');
                       }),
                       DataCell(
                         TextField(
                           decoration: InputDecoration(
                               border: InputBorder.none, hintText: 'pain'),
                         ),
                       ),
                     ]),
                   ],
                 ),
               ],
             ),

Answer 1

当我按下 DataRow 需要调用某些东西时，我做了以下操作：

DataRow(
onSelectChanged(_) {
// do something here
}
cells: [],
),

也许这会有所帮助？

编辑：这是一个如何select/deselect行

的简单示例

import 'package:flutter/material.dart';

class Stack1 extends StatefulWidget {
  @override
  _Stack1State createState() => _Stack1State();
}

class _Stack1State extends State<Stack1> {
  bool row1Selected = false;
  bool row2Selected = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DataTable(
        columns: [
          DataColumn(
            label: Text('My Data'),
          ),
        ],
        rows: [
          DataRow(
            selected: row1Selected,
            onSelectChanged: (value) {
              setState(() {
                row1Selected = value;
              });
            },
            cells: [
              DataCell(
                Text('Data 1'),
              ),
            ],
          ),
          DataRow(
            selected: row2Selected,
            onSelectChanged: (value) {
              setState(() {
                row2Selected = value;
              });
            },
            cells: [
              DataCell(
                Text('Data 2'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 2

您可以复制过去运行下面的完整代码
您可以像这样在 selected 中使用条件 0 == selectedIndex 其中 0 是 DataRow index
并在 onSelectChanged
中更改 selectedIndex 代码片段

    int selectedIndex = -1;
    ... 
    rows: [
    DataRow(
        selected: 0 == selectedIndex,
        onSelectChanged: (val) {
          setState(() {
            selectedIndex = 0;
          });
        },
        ...
    DataRow(
        selected: 1 == selectedIndex,
        onSelectChanged: (val) {
          setState(() {
            selectedIndex = 1;
          });
        },

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color color;
  int selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            DataTable(
              onSelectAll: (val) {
                setState(() {
                  selectedIndex = -1;
                });
              },
              columns: [
                DataColumn(label: Text('Language')),
                DataColumn(label: Text('Translation')),
              ],
              rows: [
                DataRow(
                    selected: 0 == selectedIndex,
                    onSelectChanged: (val) {
                      setState(() {
                        selectedIndex = 0;
                      });
                    },
                    cells: [
                      DataCell(
                        Text(
                          "RO",
                          textAlign: TextAlign.left,
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                        onTap: () {
                          setState(() {
                            color = Colors.lightBlueAccent;
                          });
                        },
                      ),
                      DataCell(
                        TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none, hintText: 'paine'),
                        ),
                      ),
                    ]),
                DataRow(
                    selected: 1 == selectedIndex,
                    onSelectChanged: (val) {
                      setState(() {
                        selectedIndex = 1;
                      });
                    },
                    cells: [
                      DataCell(
                          Text(
                            "EN",
                            textAlign: TextAlign.left,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ), onTap: () {
                        print('EN is clicked');
                      }),
                      DataCell(
                        TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none, hintText: 'bread'),
                        ),
                      ),
                    ]),
                DataRow(
                    selected: 2 == selectedIndex,
                    onSelectChanged: (val) {
                      setState(() {
                        selectedIndex = 2;
                      });
                    },
                    cells: [
                      DataCell(
                          Text(
                            "FR",
                            textAlign: TextAlign.left,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ), onTap: () {
                        print('FR is clicked');
                      }),
                      DataCell(
                        TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none, hintText: 'pain'),
                        ),
                      ),
                    ]),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Flutter 数据表 select 行

Flutter DataTable select Row

mobile

row

datarow

dart

flutter