如何在动态内容的 flutter 中创建 table？

Question

我想用 table 中的数据创建一个 table 从 Internet 获取数据（API）因为，我们构建 ListView.builder 有什么方法可以在 flutter 中构建 table 吗？

Answer 1

要创建一个 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)
                            )
                          ),
                          TableCell(child: Padding( 
                              padding: EdgeInsets.all(5),
                              child:Text(nameone.address)
                            )
                          ),
                          TableCell(child: Padding( 
                              padding: EdgeInsets.all(5),
                              child:Text(nameone.phone)
                            )
                          ),
                      ]
                );
            }).toList(),
          )
        )
    );
  }
}

输出：

这是您可以将数据动态插入 Flutter table 的方式，请访问 How to Make Table and Insert data from PHP MySQL JSON Dynamically in Flutter App 查看更多详细信息，以从使用 REST 获取的 JSON 数据创建 table API.

如何在动态内容的 flutter 中创建 table？

How to Create table in flutter with dynamic content?

android

flutter

uitableview

flutter-layout

flutter-design