使用flutter构建一张简单的表格

Flutter 是一种跨平台的移动应用开发框架，可以用于构建高性能、美观的原生应用。使用 Flutter 构建一张简单的表格可以通过以下步骤实现：

导入 Flutter 相关库：

import 'package:flutter/material.dart';

创建一个表格的数据源列表：

List<List<String>> tableData = [
  ['姓名', '年龄', '性别'],
  ['张三', '25', '男'],
  ['李四', '30', '女'],
  ['王五', '28', '男'],
];

创建一个 StatefulWidget，并定义一个数据表格的 StatelessWidget：

class DataTablePage extends StatefulWidget {
  @override
  _DataTablePageState createState() => _DataTablePageState();
}

class _DataTablePageState extends State<DataTablePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('简单表格'),
      ),
      body: SingleChildScrollView(
        child: DataTable(
          columns: [
            DataColumn(label: Text('姓名')),
            DataColumn(label: Text('年龄')),
            DataColumn(label: Text('性别')),
          ],
          rows: tableData.skip(1).map((row) {
            return DataRow(cells: [
              DataCell(Text(row[0])),
              DataCell(Text(row[1])),
              DataCell(Text(row[2])),
            ]);
          }).toList(),
        ),
      ),
    );
  }
}

在主函数中运行 Flutter 应用：

void main() {
  runApp(MaterialApp(
    home: DataTablePage(),
  ));
}

这样就完成了使用 Flutter 构建一张简单的表格。表格的每一列由 DataColumn 定义，表格的每一行由 DataRow 和 DataCell 构成。在上述例子中，表格数据使用一个二维列表 tableData 存储，并通过 map 和 skip 方法进行转换，最后将数据渲染到表格中。

请注意，以上答案是一个简单的示例，仅展示了 Flutter 构建表格的基本步骤。在实际应用中，您可以根据需要进行自定义样式、添加交互等功能。如需深入了解 Flutter，可以参考腾讯云 Flutter 相关产品和资源：

如果，你使用的是混栈开发模式，就是所谓的在原生的基础上接入flutter，那么在成功接入flutter之后，你肯定会碰到这样一个困扰，就是flutter这边的图片加载如何利用原生那边已经缓存好的图片数据。因为如果不利用的话，比如同样一张图片，在原生层加载了一次，然后，在flutter这边的业务，假如也需要加载同样一张图，而且是相同尺寸，那将会占用两份内存，这个开销是很不划算的，那么如何解决，请继续本文阅读。首先先看一个效果，图的上半部分是利用原生ImageView加载图片，可以看到内存快找中找不到Image这个class，flutter整体占用内存也比原生要低一些。

012

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

使用flutter构建一张简单的表格

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐