下面我们可以一个列表去生成数据表格里的内容 .. 在项目的 model 目录的下面，有个 post.dart ... 这个文件里面定义了一个列表数据叫 posts .. 每个项目都是一个 Post .. 里面有 title .. author .. description 还有 imageUrl 这几个属性 ..

再回到我们的 DataTable 的演示 .. 先在这个文件的顶部导入刚才的文件 .. 位置是上一级目录下面的 model 里面的 post.dart ..

找到之前添加的 DataTable 里的 rows 属性 .. 去掉手工给它设置的这个 DataRow 列表 .. 这个 DataRow 列表现在我们可以使用一个列表数据生成 ..

用一下 posts .. map ，把迭代的结果转换成一个列表 .. 用一下 toList 方法 ..

给 map 一个方法 .. 当前迭代的时候当前项目可以叫它 post ... 这个方法 return 的是一个 DataRow .. 小部件 ..

它里面需要一个 cells .. 它的值是个列表 .. 里面是每一行内容的单元格 .. 每个单元格是 DataCell .. 设置一下单元格里的内容 .. 一个 Text .. 文字是 post.title ..

复制一份 .. 这个单元格里显示的是 post.author ..

现在界面上会显示一个数据表格 .. 表格的具体内容是基于个列表生成的 ..

如果你想单独设置一下某个栏目占用的宽度，可以找到对应的 DataColumn .. 它的 label 用一个 Container .. 容器里可以使用 width 设置一下宽度 .. 容器的 child 是个文字 ..

现在 Title 这个栏目的宽度就会是我们自己设置的 ...

暂时先换回默认的宽度 .. 直接用 Text 小部件作为 label 属性的值 ..

下面我们可以再给这个表格添加一个新的栏目 .. DataColumn 的 label 是 Image ..

这样需要在 DataRow 的 cells 里面添加一个对应的单元格 .. DataCell .. 用一个 Image.network .. 显示来自网络的图像 .. 地址是 post.imageUrl ..

现在这个表格的上面会出现一个新的栏目 .. 栏目对应的内容是一个来自网络的图像 ..