Flutter UI Widget介绍—Table

最新推荐文章于 2025-03-25 17:16:27 发布

weixin_66477591

最新推荐文章于 2025-03-25 17:16:27 发布

阅读量338

点赞数 3

分类专栏： Flutter UI Widget 文章标签： flutter ui 前端

本文链接：https://blog.csdn.net/weixin_66477591/article/details/137207902

版权

Flutter UI Widget 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在Flutter应用中利用TableWidget创建表格，包括添加边框、设置列宽（如IntrinsicColumnWidth和FlexColumnWidth），并强调了TableRow中children元素数量的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Table Widget可以在app的页面上实现table的效果。

border可以给table添加线。IntrinsicColumnWidth可以让children里面的元素里的宽度按照Container里指定的宽度来排列。
如果不设置IntrinsicColumnWidth的话，就会自动把children元素占满屏幕。（Container里面设置的宽度其实是无效的。）

注意Table里面如果有多个TableRow的话，TableRow里面的children的个数要相等。

body: Table(
        border: TableBorder.all(),
        columnWidths: const {
          0: IntrinsicColumnWidth(),
          1: IntrinsicColumnWidth(),
          // 2: IntrinsicColumnWidth(),
          2: FlexColumnWidth()
        },
        children: [
          TableRow(
            children: [
              Container(
                width: 50,
                height: 50,
                color: Colors.red,
              ),
              Container(
                width: 50,
                height: 50,
                color: Colors.blue,
              ),
              Container(
                width: 50,
                height: 50,
                color: Colors.green,
              )
            ]
          ),
          TableRow(
              children: [
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.blue,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.green,
                )
              ]
          )
        ],
      )