在表中使用TextFormField (DataTable)是一种在Flutter中创建交互式表单的方法。TextFormField是一个可编辑的文本字段,它允许用户输入文本并将其提交给应用程序。
在DataTable中使用TextFormField可以实现在表格中编辑和保存数据的功能。DataTable是Flutter中用于显示表格数据的小部件,它可以显示多行和多列的数据,并支持排序和筛选。
使用TextFormField (DataTable)的步骤如下:
import 'package:flutter/material.dart';
List<Map<String, dynamic>> tableData = [
{'name': 'John', 'age': 25},
{'name': 'Jane', 'age': 30},
{'name': 'Bob', 'age': 35},
];
class TableDataModel {
String name;
int age;
TableDataModel({this.name, this.age});
}
class EditableCell extends StatefulWidget {
final TableDataModel data;
final String fieldName;
EditableCell({this.data, this.fieldName});
@override
_EditableCellState createState() => _EditableCellState();
}
class _EditableCellState extends State<EditableCell> {
TextEditingController _controller;
@override
void initState() {
super.initState();
_controller = TextEditingController(text: widget.data.name);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return TextFormField(
controller: _controller,
onChanged: (value) {
setState(() {
widget.data.name = value;
});
},
decoration: InputDecoration(
border: InputBorder.none,
),
);
}
}
class MyTable extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DataTable(
columns: [
DataColumn(label: Text('Name')),
DataColumn(label: Text('Age')),
],
rows: tableData.map((data) {
TableDataModel model = TableDataModel(name: data['name'], age: data['age']);
return DataRow(
cells: [
DataCell(EditableCell(data: model, fieldName: 'name')),
DataCell(Text(data['age'].toString())),
],
);
}).toList(),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MyTable(),
),
);
}
}
这样,就可以在表格中使用TextFormField来实现编辑功能。用户可以在TextFormField中输入文本,并通过onChanged回调来更新表格数据。
云+社区沙龙online第5期[架构演进]
企业创新在线学堂
企业创新在线学堂
云+社区技术沙龙[第6期]
云+社区技术沙龙[第7期]
DB TALK 技术分享会
云+社区技术沙龙[第27期]
领取专属 10元无门槛券
手把手带您无忧上云