如何解决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'),);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。