首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在flutter中如何在datatable中创建动态列和行(根据数据列)

在Flutter中,可以使用DataTable组件来创建动态列和行,根据数据列的数量来动态生成表格。

首先,需要引入DataTable和相关的依赖包:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:collection/collection.dart';

然后,可以使用以下代码创建一个动态列和行的DataTable:

代码语言:txt
复制
class DynamicDataTable extends StatelessWidget {
  final List<Map<String, dynamic>> data;
  final List<String> columns;

  DynamicDataTable({required this.data, required this.columns});

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: buildColumns(),
      rows: buildRows(),
    );
  }

  List<DataColumn> buildColumns() {
    return columns.map((String column) {
      return DataColumn(
        label: Text(column),
      );
    }).toList();
  }

  List<DataRow> buildRows() {
    return data.map((Map<String, dynamic> rowData) {
      return DataRow(
        cells: buildCells(rowData),
      );
    }).toList();
  }

  List<DataCell> buildCells(Map<String, dynamic> rowData) {
    return columns.map((String column) {
      return DataCell(
        Text(rowData[column].toString()),
      );
    }).toList();
  }
}

在上述代码中,DynamicDataTable是一个自定义的Widget,接受两个参数:data和columns。data是一个包含动态数据的列表,每个元素是一个包含列名和对应值的Map。columns是一个包含列名的列表。

在build方法中,首先使用buildColumns方法根据columns列表构建DataColumn列表,然后使用buildRows方法根据data列表构建DataRow列表。在buildRows方法中,又使用buildCells方法根据rowData构建DataCell列表。

最后,将构建好的DataColumn列表和DataRow列表传递给DataTable组件,即可在界面上显示动态列和行的表格。

使用示例:

代码语言:txt
复制
List<Map<String, dynamic>> data = [
  {'name': 'John', 'age': 25, 'gender': 'Male'},
  {'name': 'Jane', 'age': 30, 'gender': 'Female'},
  {'name': 'Tom', 'age': 35, 'gender': 'Male'},
];

List<String> columns = ['name', 'age', 'gender'];

Widget build(BuildContext context) {
  return Scaffold(
    body: DynamicDataTable(data: data, columns: columns),
  );
}

以上代码将会在界面上显示一个包含动态列和行的表格,表格的列名为'name'、'age'和'gender',数据来自data列表中的Map元素。

推荐的腾讯云相关产品:腾讯云函数(云原生Serverless计算服务),腾讯云数据库(云原生数据库服务),腾讯云CDN(内容分发网络服务)。

腾讯云函数产品介绍链接地址:https://cloud.tencent.com/product/scf 腾讯云数据库产品介绍链接地址:https://cloud.tencent.com/product/cdb 腾讯云CDN产品介绍链接地址:https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

根据数据源字段动态设置报表数量以及宽度

报表系统,我们通常会有这样的需求,就是由用户来决定报表需要显示的数据,比如数据源中共有八数据,用户可以自己选择报表显示哪些,并且能够自动调整列的宽度,已铺满整个页面。...本文就讲解一下ActiveReports该功能的实现方法。 第一步:设计包含所有的报表模板,将数据的所有先放置到报表设计界面,并设置你需要的宽,最终界面如下: ?...第二步:报表的后台代码添加一个Columns的属性,用于接收用户选择的,同时,报表的ReportStart事件添加以下代码: /// /// 用户选择的列名称...headers.Add(this.label6); headers.Add(this.label7); headers.Add(this.label8); // 数据控件...源码下载: 动态设置报表数量以及宽度

4.8K100

用过Excel,就会获取pandas数据框架的值、

Excel,我们可以看到单元格,可以使用“=”号或在公式引用这些值。...Python数据存储计算机内存(即,用户不能直接看到),幸运的是pandas库提供了获取值、的简单方法。 先准备一个数据框架,这样我们就有一些要处理的东西了。...df.columns 提供(标题)名称的列表。 df.shape 显示数据框架的维度,本例为45。 图3 使用pandas获取 有几种方法可以pandas获取。...每种方法都有其优点缺点,因此应根据具体情况使用不同的方法。 点符号 可以键入“df.国家”以获得“国家”,这是一种快速而简单的获取的方法。但是,如果列名包含空格,那么这种方法行不通。...想想如何在Excel引用单元格,例如单元格“C10”或单元格区域“C10:E20”。以下两种方法都遵循这种的思想。 方括号表示法 使用方括号表示法,语法如下:df[列名][索引]。

18.9K60

动态数组公式:动态获取某首次出现#NA值之前一数据

标签:动态数组 如下图1所示,在数据中有些为值错误#N/A数据,如果想要获取第一个出现#N/A数据上方数据(图中红色数据,即图2所示的数据),如何使用公式解决?...图1 图2 示例图2所示,可以单元格G2输入公式: =LET(data,A2:E18,i,MIN(IFERROR(BYCOL(data,LAMBDA(x,MATCH(TRUE,ISNA(x),0...))),""))-1,DROP(TAKE(data,i),i-1)) 即可获得想要的数据。...如果想要只获取第5#N/A值上方的数据,则将公式稍作修改为: =INDEX(LET(data,A2:E18,i,MIN(IFERROR(BYCOL(data,LAMBDA(x,MATCH(TRUE,ISNA...自从Microsoft推出动态数组函数后,很多求解复杂问题的公式都得到的简化,很多看似无法用公式解决的问题也很容易用公式来实现了。

2110

何在 Pandas 创建一个空的数据帧并向其附加行

Pandas是一个用于数据操作和分析的Python库。它建立 numpy 库之上,提供数据帧的有效实现。数据帧是一种二维数据结构。在数据数据以表格形式在行对齐。...它类似于电子表格或SQL表或R的data.frame。最常用的熊猫对象是数据帧。大多数情况下,数据是从其他数据源(csv,excel,SQL等)导入到pandas数据的。...本教程,我们将学习如何创建一个空数据帧,以及如何在 Pandas 向其追加行。...Pandas.Series 方法可用于从列表创建系列。值也可以作为列表传递,而无需使用 Series 方法。 例 1 在此示例,我们创建了一个空数据帧。... Pandas 库创建一个空数据帧以及如何向其追加行

18330

pandas的lociloc_pandas获取指定数据

大家好,又见面了,我是你们的朋友全栈君 实际操作我们经常需要寻找数据的某行或者某,这里介绍我使用Pandas时用到的两种方法:ilocloc。...目录 1.loc方法 (1)读取第二的值 (2)读取第二的值 (3)同时读取某行某 (4)读取DataFrame的某个区域 (5)根据条件读取 (6)也可以进行切片操作 2.iloc方法 (1)...读取第二的值 (2)读取第二的值 (3)同时读取某行某 (4)进行切片操作 ---- loc:通过的名称或标签来索引 iloc:通过的索引位置来寻找数据 首先,我们先创建一个...columns进行切片操作 # 读取第2、3,第3、4 data1 = data.iloc[1:3, 2:4] 结果: 注意: 这里的区间是左闭右开,data.iloc[1:...3, 2:4]的第4、第5取不到 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/178799.html原文链接:https://javaforall.cn

7.8K21

Flutter构建布局 顶

如果您愿意,可以构建仅使用小部件库的标准小部件的应用程序。 如何在Flutter布置单个小部件? 本节介绍如何创建一个简单的小部件并将其显示屏幕上。...内容 对齐小部件 调整小部件 包装小部件 嵌套 要在Flutter创建行或,可以将一个子窗口小部件列表添加到Row或Column窗口小部件。...反过来,每个孩子本身可以是一排或一,依此类推。 以下示例显示如何在行或内嵌套。 此布局按组织。 该行包含两个孩子:左侧的一右侧的图片: ? 左的小部件树嵌套。 ?...Dart code: main.dart Icons: Icons class Pubspec: pubspec.yaml 嵌套 布局框架允许您根据需要在行内部嵌套。...允许你指定一个tile的最大像素宽度 注意:显示二维列表时,重要的是单元格占用哪一(例如,它是“avocado”的“calorie”的条目),请使用Table或DataTable

43K10

Flutter DataTable 看这一篇就够了

版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 DataTable DataTable控件显示表格数据DataTable需要设置,用法如下...的,rows参数是DataTable的每一数据,效果如下: 添加一数据,只需要添加一个DataRow即可,用法如下: DataTable( ......DataColumn 默认情况下数据是左对齐的,让某一右对齐只需设置DataColumnnumeric参数true,设置如下: DataTable( columns: [ DataColumn...,用法如下: DataRow( onSelectChanged: (selected){ } ... ) 设置了onSelectChanged参数,在数据的每一表头的前面显示勾选框,效果如下:...text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70] 排序 DateTable本身是没有排序功能的,当用户点击表头时对数据按照本数据进行排序

2.4K00

C#代码示例:WinForm创建并绑定一个DataTable

我的一篇文章,我解释了如何在没有数据库的情况下以web形式绑定gridview。这里,我将解释如何在没有数据库的windows窗体绑定datagrid。...3、将此列column添加到datatable 4、创建一个包含输入控件所有值的。 5、将datatable绑定到Datagrid。 在做这个之前,我们需要先添加一个命名空间。...using System.Data; Step 1: 创建数据DataTable dt = new DataTable(); Step 2: 创建数据 DataColumn dc1 = new DataColumn...绑定到datagrid时,输入一个条件。首先,检查该数据是否有数据。如果没有数据,则绑定datagrid标头,否则只绑定没有datacolumn标头的。...因此,通过这种方式,我们就可以windows应用程序维护datatable状态。

3.2K40

ADO.Net学习总结

综合前面三种方式各有特点,第一种方式最直接,但是有可能抛出异常,第二种方式比第一种稍微灵活一些,我们可以根据读取到值为空(.net里用DBNull类来表示,可以表示数据任意数据类型的空值),我们就不进行相应的类型转换...然后将数据添加到 DataSet DataTable 对象或者直接填充到DataTable的实例,如果 DataTable 对象不存在,则自动创建该对象。...5.DataTable对象 DataTable 是 ADO.NET 库的核心对象,就像普通的数据的表一样,它也有。它主要包括DataRowDataColumn,分别代表。...(2) 数据(DataColumn) 数据数据(又称字段)定义了表的数据结构,例如,可以用它确定数据类型大小,还可以对其他属性进行设置。...例如,确定数据是否是只读的、是否是主键、是否允许空值等;还可以让一个初始值的基础上自动增殖,增值的步长还可以自行定义。

1.2K50

【8】数据浏览表格的快速输出

表头 对表格输出的封装 生成表格的实例 功能的扩展 页面数据控件的自动交换机制,我们通过PageX实现了一种快速的控件和数据交换机制,能够方便快捷地完成数据数据记录的管理。...一般情况下,进入这个编辑页面之前,还应该有另外一个页面,可以一次展示多条数据记录的信息。在这个数据的列表界面,可以进行各种操作,删除、跳转、编辑等。...实际的应用,配合JQuery、CSS样式表Ajax,可以发挥强大的威力,达到“无所不能”的境界。 表格还是列表? 输出数据数据列表,实际上就是以格式化的方法,把一个多行多数据展示出来。...本着最简单的原则,表头可以从DataTable获取,dt.Columns[i].ColumnName就可以返回dt的第i的表名。...3、新的数据 如果需要展示一些动态数据,可以对DataTable进行处理,插入新,填充新值,再传递给生成函数。

2.5K50

一文入门Python的Datatable操作

整个文件共包含226万145数据数据量规模非常适合演示 datatable 包的功能。...对象datatable 的基本分析单位是 Frame,这与Pandas DataFrame 或 SQL table 的概念是相同的:即数据的二维数组排列展示。...数据操作 dataframe 一样,datatable 也是柱状数据结构。 datatable ,所有这些操作的主要工具是方括号,其灵感来自传统的矩阵索引,但它包含更多的功能。...下面来看看如何在 datatable Pandas ,通过对 grade 分组来得到 funded_amout 的均值: datatable 分组 %%timefor i in range(100...在上面的例子,dt.f 只代表 dt_df。 ▌过滤 datatable ,过滤的语法与GroupBy的语法非常相似。

7.5K50

Python的Datatable包怎么用?

整个文件共包含226万145数据数据量规模非常适合演示 datatable 包的功能。...Frame 对象datatable 的基本分析单位是 Frame,这与Pandas DataFrame 或 SQL table 的概念是相同的:即数据的二维数组排列展示。...数据操作 dataframe 一样,datatable 也是柱状数据结构。 datatable ,所有这些操作的主要工具是方括号,其灵感来自传统的矩阵索引,但它包含更多的功能。...下面来看看如何在 datatable Pandas ,通过对 grade 分组来得到 funded_amout 的均值: datatable 分组 %%time for i in range(100...在上面的例子,dt.f 只代表 dt_df。 ▌过滤 datatable ,过滤的语法与GroupBy的语法非常相似。

7.2K10

Python的Datatable包怎么用?

整个文件共包含226万145数据数据量规模非常适合演示 datatable 包的功能。...对象datatable 的基本分析单位是 Frame,这与Pandas DataFrame 或 SQL table 的概念是相同的:即数据的二维数组排列展示。...数据操作 dataframe 一样,datatable 也是柱状数据结构。 datatable ,所有这些操作的主要工具是方括号,其灵感来自传统的矩阵索引,但它包含更多的功能。...下面来看看如何在 datatable Pandas ,通过对 grade 分组来得到 funded_amout 的均值: datatable 分组 %%timefor i in range(100...在上面的例子,dt.f 只代表 dt_df。 ▌过滤 datatable ,过滤的语法与GroupBy的语法非常相似。

6.7K30

【愚公系列】2023年11月 Winform控件专题 DataGridView控件详解

CellStyle编辑器,可以设置奇数偶数的背景颜色、字体、前景颜色等样式属性。也可以选择使用其他样式。..."; } }}上述代码,首先创建了一个DataGridView控件,并为其设置了数据源,然后将其添加到窗体。...使用方法如下:设置数据源首先要设置数据源,可以使用任意类型的对象作为数据源,比如DataTable、List、Array等等,例如://创建数据DataTable dt = new DataTable...可以通过设置的属性来控制哪些可以过滤,以及过滤条件。数据选择:DataGridView控件可以允许用户选择一或多行数据。可以通过设置控件的属性来控制选择模式,单选、多选等。...为该数据表添加四个字段:ID、Name、GenderAge。Step 4: 编写数据访问层代码项目中添加一个名为CustomerDAL的类,用于访问数据库。该类编写CRUD操作的代码。

56011

Flutter 分页功能表格控件

PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTable,生成一批数据,项目中此一般通过服务器获取,定义model类: class User {...index获取每一数据,通常使用DataRow.byIndex返回数据,cells表示每一个表格的数据,cells的数量需要与PaginatedDataTablecolumns数量保持一致。...设置5如下: PaginatedDataTable( rowsPerPage: 5, ... ) onRowsPerPageChanged不为null时,左下角出现每页显示多少行数的选项,用法如下...:$page'); }, 打印数据为: flutter: onPageChanged:10 flutter: onPageChanged:20 flutter: onPageChanged:30 flutter...,表示当前行是否选中,User添加是否选中属性,用法如下: class User { User(this.name, this.age, this.sex, {this.selected =

1.9K31

List,DataTable实现行转列的通用方案

最近在做报表统计方面的需求,涉及到转列报表。根据以往经验使用SQL可以比较容易完成,这次决定挑战一下直接通过代码方式完成行转列。期间遇到几个问题用到的新知识这里整理记录一下。...阅读目录 问题介绍 动态Linq System.Linq.Dynamic其它用法 DataTable转列 总结 回到顶部 问题介绍   以家庭月度费用为例,可以[Name,Area,Month]三个维度上随意组合进行分组...List类型,前台传过来分组维度动态字段。  ...上面用到了参数化查询,实现了查找姓名是张三的数据,通过这段代码你或许感受不到它的好处。但是EntityFramework结合起来就可以实现动态拼接SQL的功能了。...转列后数据 private static DataTable RowToColumn(DataTable dt, List DimensionList

1.9K70

何在施工物料管理Web系统处理大量数据并显示

后来使用了矩表控件非常好的解决了需求,本文主要介绍之前如何通过代码将数据展现在页面,以及使用矩表控件创建行列转置动态列表格,并显示在网页。...SQL 语句实现实现汇总分级功能,进行7张表的复杂连接汇总: 每一张表包含多,需要做出多层连接排序,并根据用户输入对数据进行过滤 select a....使用报表提供的矩表控件实现行列转置,就不需要再写那么复杂的行列转置分组代码,而且会根据物料的供应方式来自动生成,将数据展现在最终页面。 二、使用矩表控件实现步骤: 1. 添加 RDL 报表 ?...5.3 插入静态,因为这些不会随着数据动态改变,所以是静态,只需要右键单击-》插入列 ? 到这里,数据的基本结构就成形了,接下来需要做的就是将业务数据矩表控件绑定。...将 "SupplyMode" 添加到分组单元格上,会自动根据 SupplyMode 的值来生成数;行会根据一级类别二级类别,自动合并相同单元格,并根据内容自动生成行数据;将字段拖拽到单元格后,合并单元格

2.5K100

Salesforce LWC学习(十八) datatable展示 image

自定义开发我们就可以使用 lightning-datatable组件。一个 lightning-datatable组件用来展示表格数据,它可以根据数据类型展示每一。...展示格式化焗油适当类型的 具有无限滚动功能 指定的数据类型允许 inline编辑 可以定义header的action 可以定义行级别的action 重置每一展示的大小 选择操作 指定的通过升序或者降序排列...简单介绍完毕,下面通过几点来慢慢带入datatable的功能。 一. 基础 Datatable展示数据 demo展示,我们来看官方提供的一个demo。...二. datatable展示父表的字段值 上个demo简单介绍了datatable的使用,数据全是写死的demo,接下来通过一个包含后台的逻辑进行datatable展示数据。...实现datatable展示 formula类型是图片的功能 自己看文档的小伙伴可能发现datatable的columns的type没有类似 image类型,但是object field创建时我们很容易创建一些

1.4K20

C# 数据操作系列 - 3. ADO.NET 离线查询

离线查询里最关键的三个接口或类: IDataAdapter 一种适配器,用来获取数据并填充或更新DataSet DataSet 表示数据在内存的缓存 DataTable 表示内存中一个数据表 IDataAdapter...里 C#内部,其实不允许推荐直接继承该接口,推荐继承DataAdapter类,该类规定了数据库Adapter初始化的时候,必须提供一个可以访问的数据库连接要执行的命令文本。...的名称 public Type DataType { get; set; }//获取或设置存储数据的类型 DataRow: public object this[System.Data.DataColumn...上图是VS的调试模式,可以看到 根据上图我们大概可以猜测一下DataTable内部的数据结构,或者C#让我们理解的结构是什么。...其中DataColumn对应着图中,ColumnName就是图 所示的列名。而DataRow就是,ItemArray则是一数据

1.8K20
领券