Flutter DataTable 选择行

Ale*_*ana 2 mobile row datarow dart flutter

我在颤振中遇到 DataTable 问题。我想更改行的状态,当用户单击其中一个时,但我发现如何在 DataRow 中使用 selected: true 来“手动”执行此操作。

如何通过更改状态让用户只选择一行,然后取消选择其余行?

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'),
                         ),
                       ),
                     ]),
                   ],
                 ),
               ],
             ),
Run Code Online (Sandbox Code Playgroud)

chu*_*han 5

您可以复制过去运行完整的代码下面
您可以在使用条件下selected是这样0 == selectedIndex,其中0是DataRow指数
与变化selectedIndexonSelectChanged
的代码片段

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

工作演示

在此处输入图片说明

完整代码

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'),
                        ),
                      ),
                    ]),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)