如何创建带有动态内容的表格？

问题描述

我想创建一个表，其中包含要从 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"]
        );
    } 
}

ma​​in.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 数据创建表。