宝塔服务器面板，一键全能部署及管理，送你3188元礼包，点我领取
Flutter的Table组件如何实现TableRow循环渲染
首先先来看下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'),
),
),
],
),
],
),
),
);
}
}直接上效果图：
一切正常！
但是在实际项目中，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(),
),
),
);
}这样写完后再查看下效果：
看到这里感觉好像一切都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://wolfcode.net/info/155/
