Flutter DataTable选择行

问题描述

DataTable出现问题。当用户单击其中之一时，我想更改行的状态，但是我发现了如何“手动”执行以下操作：在DaTarow中选中“ 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",onTap: () {
                         print('EN is clicked');
                       }),hintText: 'bread'),DaTarow(cells: [
                       DataCell(
                           Text(
                             "FR",onTap: () {
                         print('FR is clicked');
                       }),hintText: 'pain'),

解决方法

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

    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",onTap: () {
                        print('EN is clicked');
                      }),hintText: 'bread'),DataRow(
                    selected: 2 == selectedIndex,onSelectChanged: (val) {
                      setState(() {
                        selectedIndex = 2;
                      });
                    },cells: [
                      DataCell(
                          Text(
                            "FR",onTap: () {
                        print('FR is clicked');
                      }),hintText: 'pain'),);
  }
}

,

当我按下DataRow时需要打电话时，我做了以下事情：

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

也许这会有所帮助？

编辑：这是一个如何选择/取消选择行的简单示例

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