在Flutter中,DataTable是一个用于显示和编辑表格数据的小部件。要在DataTable中编辑单元格,可以按照以下步骤进行操作:
import 'package:flutter/material.dart';
以下是一个示例代码,演示如何在Flutter DataTable中编辑单元格:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Editable DataTable')),
body: MyDataTable(),
),
);
}
}
class MyDataTable extends StatefulWidget {
@override
_MyDataTableState createState() => _MyDataTableState();
}
class _MyDataTableState extends State<MyDataTable> {
List<Map<String, dynamic>> _data = [
{'name': 'John', 'age': 25},
{'name': 'Jane', 'age': 30},
{'name': 'Bob', 'age': 35},
];
Map<String, bool> _editStatus = {};
@override
Widget build(BuildContext context) {
return DataTable(
columns: [
DataColumn(label: Text('Name')),
DataColumn(label: Text('Age')),
],
rows: _data.map((item) {
int index = _data.indexOf(item);
return DataRow(
cells: [
DataCell(
_editStatus[index] == true
? TextFormField(
initialValue: item['name'],
onChanged: (value) {
setState(() {
_data[index]['name'] = value;
});
},
)
: Text(item['name']),
onTap: () {
setState(() {
_editStatus[index] = true;
});
},
),
DataCell(
_editStatus[index] == true
? TextFormField(
initialValue: item['age'].toString(),
onChanged: (value) {
setState(() {
_data[index]['age'] = int.parse(value);
});
},
)
: Text(item['age'].toString()),
onTap: () {
setState(() {
_editStatus[index] = true;
});
},
),
],
);
}).toList(),
);
}
}
在上面的示例中,我们创建了一个包含姓名和年龄的DataTable。单元格可以通过点击来切换为编辑模式,并且可以实时更新数据源中的值。
这只是一个简单的示例,你可以根据自己的需求进行更复杂的单元格编辑操作。希望对你有所帮助!
领取专属 10元无门槛券
手把手带您无忧上云