当前位置:首页 > 其他 > Flutter的Table组件如何实现TableRow循环渲染

宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取

Flutter的Table组件如何实现TableRow循环渲染

原创 2019-08-14 其他 3098
分享给朋友:

首先先来看下Flutter的Table组件是如何实现的,下面给出一个demo

import 'package:flutter/material.dart';

class Tabledemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _Tabledemo();
  }
}

class _Tabledemo extends State<Tabledemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Table Demo'),
        centerTitle: true,
      ),
      body: Container(
        child: Table(
          border: TableBorder.all(width: 1.0, color: Colors.black12),
          children: [
            TableRow(
              //第一行样式 添加背景色
              decoration: BoxDecoration(
                color: Colors.black12,
              ),
              children: [
                SizedBox(
                  height: 30.0,
                  child: Center(
                    child: Text(
                      '标题A',
                    ),
                  ),
                ),
                Center(
                  child: Text(
                    '标题B',
                  ),
                ),
                Center(
                  child: Text(
                    "标题C",
                  ),
                ),
              ],
            ),
            TableRow(
              children: <Widget>[
                TableCell(
                  child: Center(
                    child: Text('demo1'),
                  ),
                ),
                TableCell(
                  child: Center(
                    child: Text('demo2'),
                  ),
                ),
                TableCell(
                  child: Center(
                    child: Text('demo3'),
                  ),
                ),
              ],
            ),
            TableRow(
              children: <Widget>[
                TableCell(
                  child: Center(
                    child: Text('demo1'),
                  ),
                ),
                TableCell(
                  child: Center(
                    child: Text('demo2'),
                  ),
                ),
                TableCell(
                  child: Center(
                    child: Text('demo3'),
                  ),
                ),
              ],
            ),
            TableRow(
              children: <Widget>[
                TableCell(
                  child: Center(
                    child: Text('demo1'),
                  ),
                ),
                TableCell(
                  child: Center(
                    child: Text('demo2'),
                  ),
                ),
                TableCell(
                  child: Center(
                    child: Text('demo3'),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

直接上效果图:

QQ截图20190814120353.jpg

一切正常!

但是在实际项目中,Tbale中的内容是需要通过接口获取数据循环渲染显示的,那么要如何才能把Table下的TableRow循环渲染加载呢?

首先我们假设一个通过API获取得到的数据demoList:

  List demoList = [
    {
      "A": "list1",
      "B": "list2",
      "C": "list3",
    },
    {
      "A": "list1",
      "B": "list2",
      "C": "list3",
    },
    {
      "A": "list1",
      "B": "list2",
      "C": "list3",
    },
    {
      "A": "list1",
      "B": "list2",
      "C": "list3",
    },
    {
      "A": "list1",
      "B": "list2",
      "C": "list3",
    },
  ]

查看上面的效果图可以发现,我们需要的循环体是标题下的数据,而标题不用变,所以我们可以先单独写一个方法来拼接数据:

  _tableRowList() {
    var count = demoList.length;
    dynamic content;
    List<TableRow> Tlist = <TableRow>[
      TableRow(
        children: [
          Center(child: Text('标题A')),
          Center(child: Text('标题B')),
          Center(child: Text('标题C')),
        ],
      ),
    ];
    for (var i = 0; i < count; i++) {
      content = TableRow(
        children: [
          Center(child: Text(demoList[i]['A'].toString())),
          Center(child: Text(demoList[i]['B'].toString())),
          Center(child: Text(demoList[i]['C'].toString())),
        ],
      );
      Tlist.add(content);
    }
    return Tlist;
  }

然后在build中调用:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Table Demo'),
        centerTitle: true,
      ),
      body: Container(
        child: Table(
          border: TableBorder.all(width: 1.0, color: Colors.black12),
          children: _tableRowList(),
        ),
      ),
    );
  }

这样写完后再查看下效果:

QQ截图20190814120125.jpg

看到这里感觉好像一切都OK了!但是实际项目中我们可能要展示的数据会更多,也许有可能要超过整个屏幕可以显示的范围,这也是我在项目中遇到的一个问题,数据溢出屏幕后数据不能滚动!导致最后的数据你看不到。

如何解决呢?其实很简单一个Listview就可以搞定了!

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Table Demo'),
        centerTitle: true,
      ),
      body: Container(
          child: ListView(
        children: <Widget>[
          Table(
            border: TableBorder.all(width: 1.0, color: Colors.black12),
            children: _tableRowList(),
          ),
        ],
      )),
    );
  }

最后贴出整份demo的代码,如果有什么不懂的地方可以留言询问:

import 'package:flutter/material.dart';

class Tabledemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _Tabledemo();
  }
}

class _Tabledemo extends State<Tabledemo> {
  List demoList = [
    {
      "A": "list1",
      "B": "list2",
      "C": "list3",
    },
    {
      "A": "list1",
      "B": "list2",
      "C": "list3",
    },
    {
      "A": "list1",
      "B": "list2",
      "C": "list3",
    },
    {
      "A": "list1",
      "B": "list2",
      "C": "list3",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Table Demo'),
        centerTitle: true,
      ),
      body: Container(
          child: ListView(
        children: <Widget>[
          Table(
            border: TableBorder.all(width: 1.0, color: Colors.black12),
            children: _tableRowList(),
          ),
        ],
      )),
    );
  }

  _tableRowList() {
    var count = demoList.length;
    dynamic content;
    List<TableRow> Tlist = <TableRow>[
      TableRow(
        children: [
          Center(child: Text('标题A')),
          Center(child: Text('标题B')),
          Center(child: Text('标题C')),
        ],
      ),
    ];
    for (var i = 0; i < count; i++) {
      content = TableRow(
        children: [
          Center(child: Text(demoList[i]['A'].toString())),
          Center(child: Text(demoList[i]['B'].toString())),
          Center(child: Text(demoList[i]['C'].toString())),
        ],
      );
      Tlist.add(content);
    }
    return Tlist;
  }
}


声明:版权所有,违者必究 | 如未注明,均为原创 | 本网站采用 BY-NC-SA 协议进行授权

转载:转载请注明原文链接,违者必究 - :https://www.wolfcode.net/info/155/

分享给朋友:

相关文章

Gin框架参数多次绑定

在我们写的绝大部分的API代码当中,其实都是需要传递参数的,无论是通过 path、query string 还是 body,在 gin 当中,为我们提供了一系列的 binding 方法让我们可以把这些参数绑定到一个对象中,通过还可以通过 struct tag 来对参数进行校验,不知道到大家曾今是否和遇到过相同的困惑:

手摸手源码单机部署OpenIM实况教学

该操作均在CentOS7下进行这里不推荐直接使用 git clone&nbsp;--recursive&nbsp;方式,因为大家都懂的网络问题!首先到&nbsp;https://github.com/OpenIMSDK/Open-IM-Server&nbsp;下载项目压缩包再到&nbsp;https

宝塔WebHook中自动git拉取没有反应解决方法

最近遇到一个比较奇怪的问题,所有操作都完成后,无论怎么测试,git pull一直都不会执行,也没有报错.

推荐一款出色的SSH工具

​Tabby是一款可无限定制的跨平台终端应用,用于本地shell、串行、SSH和Telnet连接。支持SFTP。

一个简单的Golang代码,监控windows进程退出并自动重启

只要修改processName 为你所需要的进程exeprocessName_path&nbsp;为你所需要的进程路径package&nbsp;main import&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&quot;bytes&quot; &nbsp;&nbsp;

强烈推荐:一个快速处理json的第三方包

该第三方包采用go语言开发:先来看看官方的案例:package&nbsp;main import&nbsp;&quot;github.com/tidwall/sjson&quot; const&nbsp;json&nbsp;=&nbsp;`{&quot;name&quot;:{&quot

gocron数据库表和字段字符集转换为utf8mb4

gocron_sql_convert_to_utf8mb4因为 gocron - 定时任务管理系统 默认表和字段字符集是utf8(也就是utf8mb3),所以在现下很多数据存储会有问题,最为突出的就是emoji表情写了一个简单的转换sql:git地址 有用到的小伙伴可以拿去直接转换

为集群搭建一个定时任务集中调度系统

集群任务下,很多服务器的定时任务都单独集中在相对应的服务器crontab下,即使现在有了类似于宝塔之类的面板,但是定时任务还是得每台服务器单独登入后去配置。是否可以单独在一台机子上,控制所有的集群定时任务呢?答案是肯定的!!!gocron就可以做到,之前博主分享过单机搭建定时任务管理系统,那现在,我

Linux 日志清理

磁盘占用90%,占用过多,分析日志查看原因