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

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

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

首先先来看下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/

分享给朋友:

相关文章

如何在Linux上做一个定时任务管理系统

gocron,使用Go语言开发的轻量级定时任务集中调度和管理系统, 用于替代Linux-crontab

Nginx 自动生成日志备份

Nginx网站访问日志数据会随着访问量的增加而日益庞大,以下介绍一个简单的脚本,自动切割备份过往日期日志数据

3月18日,多年的老站终于破了1.5W的PV

从最早的建站初心是为了自己方便,从fivefilm.com到30942.com,有网友说域名不好记,索性注册了看个蛋(kangedan.com)的域名。6年多的时间(我也是随性等得起)0推广,纯自然流量!今天看了下PV记录,有点被吓到!特别纪念一下,之前都是几千IP,封顶也没超过1.5W。

如果你懂得用Excel,微软Power Fx助你成为一名优秀的程序员

在程序员的世界中,打开第一扇门永远是Hello World!这是Power Fx的一段最基础的语法。微软宣布推出新的开源编程语言 Power Fx,一种基于 Microsoft Excel 的低代码公式语言;将可以在整个 Microsoft Power Platform 中进行使用。该语言背后的动机

微软推出Go语言从入门到上手的文档

微软有自己的技术文档专栏网站,可能很多小伙伴都不知道!除了自己的.NET语言,还包括了市面上绝大多数流行语言的技术文档都有。这次,微软把Go语言也加入到了自家技术文档网站中,而且绝大多数文档都是有中文版本的!点击直接访问:更多文档访问以下地址:https://docs.microsoft.com/z

Deno初体验:一个简单的MVC案例

Deno 是一个 JavaScript/TypeScript 的运行时,默认使用安全环境执行代码,有着卓越的开发体验。Deno 含有以下功能亮点:

【年度重磅】阿里淘系全年技术总结黑皮书,1500页免费下载!

淘系技术将2020一整年的精华内容梳理合并,重磅推出【淘系技术2020技术年货】。在这本书中,你将看到:各技术栈下时新前沿的技术讲解与方法技巧、淘系技术大牛的职场成长经验&学习问答实录、年度精选技术人员必读书单、淘系经典开源项目介绍、2020淘系顶会 paper 全文。

百度上线“开发者搜索”,程序员专用的搜索平台

无意中发现了一个地址:https://kaifa.baidu.com百度近期上线的“开发者搜索”功能,看来是给程序员专门开发的一个搜索功能板块,目前测试了页面还算清爽,没有广告,后期未知!有待观察,有需要的小伙伴可以进行深度使用测试~~

纪念我们即将逝去的CentOS

CentOS 官方发文称&nbsp;CentOS Stream 才是 CentOS 项目的未来,在接下来的一年里,将逐步把开发工作的重心从 CentOS Linux 往 CentOS Stream 转移。官方已明确表示未来不会再发布由 RHEL 代码编译而成的 CentOS,意思就是无须再对 Cen

为什么现在不建议个人站长做网站选择国内备案了?

除个别地区外,大多数国内的服务器相对比较便宜,但是便宜的代价就是需要备案,备案相对来说也有一定的好处,比如网络相对比较稳定(老观念)、一些国内比较大型的广告联盟可以申请、还有SEO方面的收录会相对比较快等等~但是缺点也很明显,比如备案时间长,突击审查时遇到不符合某些条条框框的规定后要重新整改,个人增