如何解决如何创建带有动态内容的表格?
我想创建一个表,其中包含要从 Internet 获取的数据(API)
因为,我们构建 ListView.builder
有没有办法在 Flutter 中构建 table
?
解决方法
要创建表并动态插入数据,首先需要一个数据模型。有关详细信息,请参阅下面的示例。
data.dart(数据模型):
class NameOne{
String sn,name,address,phone;
NameOne({
this.sn,this.name,this.address,this.phone
});
//constructor
factory NameOne.fromJSON(Map<String,dynamic> json){
return NameOne(
sn: json["sn"],name: json["name"],address: json["address"],phone: json["phone"]
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'package:testapp/data.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),);
}
}
class HomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
List<NameOne> namelist = []; //list of names,you can generate it using JSON as well
namelist.add(NameOne(sn:"1",name:"Name 1",address:"Address 1",phone: "Phone 1"));
namelist.add(NameOne(sn:"2",name:"Name 2",address:"Address 2",phone: "Phone 2"));
namelist.add(NameOne(sn:"3",name:"Name 3",address:"Address 3",phone: "Phone 3"));
//add more adata here
return Scaffold(
appBar: AppBar(
title:Text("Dynamic Data Table"),//title of app
backgroundColor: Colors.redAccent,//background color of app bar
),body: Container(
padding: EdgeInsets.all(15),child:Table( //if data is loaded then show table
border: TableBorder.all(width:1,color:Colors.black45),children: namelist.map((nameone){ //display data dynamically from namelist List.
return TableRow( //return table row in every loop
children: [
//table cells inside table row
TableCell(child: Padding(
padding: EdgeInsets.all(5),child:Text(nameone.sn)
)
),TableCell(child: Padding(
padding: EdgeInsets.all(5),child:Text(nameone.name)
)
),child:Text(nameone.address)
)
),child:Text(nameone.phone)
)
),]
);
}).toList(),)
)
);
}
}
这是您可以动态向 Flutter 表插入数据的方式,请访问 How to Make Table and Insert data from PHP MySQL JSON Dynamically in Flutter App 以查看更多详细信息,以根据使用 REST API 获取的 JSON 数据创建表。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。