System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind() 一种可滑动可合并单元格的Flutter图表展示方法技术_技高网

一种可滑动可合并单元格的Flutter图表展示方法技术

技术编号:43010388 阅读:10 留言:0更新日期:2024-10-18 17:16
本发明专利技术涉及图表绘制领域,具体提供一种可滑动可合并单元格的Flutter图表展示方法,包括步骤:获取目标表格的所有参数,计算目标表格中每行的高度;搭建目标表格的整体框架,定义两个SingleChildScrollView组件分别包裹表头和内容,同时创建两个ScrollController分别监听控制两个SingleChildScrollView组件;分别绘制目标表格的表头视图、目标表格中内容的单行视图以及目标表格的合并单元格视图;使用Column组件,将绘制好的视图填充在目标表格的整体框架中。解决了现有Flutter的基础组件无法支持单元格合并、横向纵向滑动查看、表头固定、查看单元格内容等展示需求的问题。

【技术实现步骤摘要】

本专利技术涉及图表绘制领域,具体提供一种可滑动可合并单元格的flutter图表展示方法。


技术介绍

1、在flutter移动端的开发中,想要实现图表数据的展示,flutter提供了原有组件table,通过设置children(行列数据)、columwidths(每列宽度)、defaultcolumnwidth(默认列宽度)、textdirection(阅读顺序)、defaultverticalaligment(对齐方式)、textbaseline(对齐文本的水平线)可实现简单的图表数据展示。

2、但在 flutter 移动端应用(android、ios)开发中,通常会有支持单元格合并、横向纵向滑动查看、表头固定、查看单元格内容的图表展示需求,该原有组件table在实际的应用中存在一定局限性,无法满足上述需求。


技术实现思路

1、为了克服上述缺陷,提出了本专利技术,解决了现有flutter的基础组件无法支持单元格合并、横向纵向滑动查看、表头固定、查看单元格内容等展示需求的问题。

2、本专利技术提出一种可滑动可合并单元格的flutter图表展示方法,包括以下步骤:

3、获取目标表格的所有参数,创建绘制图表所需的数据模型,所述目标表格第一行数据定义为表头,所述目标表格第二行及以下的数据定义为内容;

4、计算目标表格中每行的高度tempheight,并将每行的高度存储在一个高度集合map中;

5、根据高度集合map搭建目标表格的整体框架,定义两个singlechildscrollview组件分别为表头singlechildscrollview组件和内容singlechildscrollview组件,同时创建两个scrollcontroller分别定义为headerscrollcontroller和tablescrollcontroller,所述headerscrollcontroller用于监听控制表头singlechildscrollview,所述tablescrollcontroller用于监听控制内容singlechildscrollview;

6、分别绘制目标表格的表头视图、目标表格中内容的单行视图以及目标表格的合并单元格视图,将绘制的表头视图嵌套在表头singlechildscrollview组件中,将绘制的目标表格中内容的所有单行视图都嵌套在内容singlechildscrollview组件中;

7、使用column组件,在所述目标表格的整体框架中依次填充绘制好的表头视图、单行视图以及合并单元格视图。

8、进一步,所述数据模型包括默认列宽defaultcolumnwidth、特殊列宽{n1:m1,n2:m2,……}、每行的数据源和合并单元格的数据源,其中,

9、n1:m1表示在目标表格中第n1列的列宽为m1,n2:m2表示在目标表格中第n2列的列宽为m2;

10、行的数据源包括目标表格所有的行实例对象,每个行实例对象包括该行内所有的单元格实例对象,每个单元格实例对象包括该单元格内的文本内容、文本样式和背景色;

11、合并单元格的数据源包括目标表格所有的合并单元格实例对象,每个所述合并单元格实例对象包括该合并单元格在目标表格中的左上角横向索引值、左上角纵向索引值、右下角横向索引值、右下角纵向索引值以及该合并单元格的文本内容。

12、进一步,所述计算目标表格中每行的高度tempheight,包括对目标表格中的每行均依次执行以下步骤:

13、计算当前行中每个单元格高度;

14、将当前行的高度tempheight初始定义为0,并依次与当前行中每个单元格高度进行比较;

15、如果单元格高度大于tempheight,将单元格高度的值赋予tempheight,如果单元格高度不大于tempheight,保留当前的 tempheight。

16、进一步,所述计算当前行中每个单元格高度,包括对当前行中的每个单元格均依次执行以下步骤:

17、获取当前单元格的文本内容;

18、使用textpainter组件,根据文本内容、文字显示样式、单元格最大宽度、文本最大行数计算文本高度,得到当前单元格高度。

19、进一步,所述绘制表头视图,包括对于表头所在行执行以下步骤:

20、获取当前行实例对象以及当前行的高度;

21、绘制当前行中所有的单元格视图;

22、将所有单元格视图放在一个row组件中,通过row组件将该行内所有单元格视图水平方向依次排列展示。

23、进一步,所述绘制目标表格中内容的单行视图,包括对目标表格中内容的每行均依次执行以下步骤:

24、获取当前行实例对象、当前行所在行数以及当前行的高度;

25、绘制当前行中所有的单元格视图;

26、将所有单元格视图放在一个row组件中,通过row组件将该行内所有单元格视图水平方向依次排列展示。

27、进一步,所述绘制当前行中所有的单元格视图,包括对当前行中的每个单元格均依次执行以下步骤:

28、获取当前单元格实例对象、当前单元格所在行数、当前单元格所在的列数以及当前单元格所在行的高度;

29、根据当前单元格所在行数、所在列数得到当前单元格宽度和高度;

30、调用获取的参数,进行单元格的绘制,使用gesturedetector组件设置当前单元格的点击事件,使用container组件设置当前单元格显示样式,使用text组件显示当前单元格的文本内容。

31、进一步,所述绘制合并单元格视图,包括对目标表格中的每个合并单元格均依次执行以下步骤:

32、获取当前合并单元格实例对象;

33、定义当前合并单元格的左上角坐标(startx,starty)和右下角坐标(endx,endy);

34、遍历从0到该合并单元格左上角横向索引值的所有列,计算所有列宽的和作为startx,遍历从0到该合并单元格右下角横向索引值的所有列,计算所有列宽的和作为endx;

35、遍历从0到该合并单元格左上角纵向索引值的所有行,计算所有行高的和作为starty,遍历从0到该合并单元格右下角纵向索引值的所有行,计算所有行高的和作为endy;

36、计算startx与endx之差得到当前合并单元格的宽度,计starty与endy之差算得到当前合并单元格的高度;

37、使用stack组件实现当前合并单元格的绘制,使用container组件设置当前合并单元格显示样式,使用text组件显示当前合并单元格的文本内容。

38、本专利技术的工作原理和有益效果:

39、在实施本专利技术的技术方案中,首先根据目标表格的参数创建数据模型,基于该数据模型执行后续的绘制。然后使用flutter提供的基础组件,本文档来自技高网...

【技术保护点】

1.一种可滑动可合并单元格的Flutter图表展示方法,其特征在于,包括以下步骤:

2.根据权利要求1所述的一种可滑动可合并单元格的Flutter图表展示方法,其特征在于,所述数据模型包括默认列宽defaultColumnWidth、特殊列宽{n1:m1,n2:m2,……}、每行的数据源和合并单元格的数据源,其中,

3.根据权利要求1所述的一种可滑动可合并单元格的Flutter图表展示方法,其特征在于,所述计算目标表格中每行的高度tempHeight,包括对目标表格中的每行均依次执行以下步骤:

4.根据权利要求3所述的一种可滑动可合并单元格的Flutter图表展示方法,其特征在于,所述计算当前行中每个单元格高度,包括对当前行中的每个单元格均依次执行以下步骤:

5.根据权利要求2所述的一种可滑动可合并单元格的Flutter图表展示方法,其特征在于,所述绘制表头视图,包括对于表头所在行执行以下步骤:

6.根据权利要求2所述的一种可滑动可合并单元格的Flutter图表展示方法,其特征在于,所述绘制目标表格中内容的单行视图,包括对目标表格中内容的每行均依次执行以下步骤:

7.根据权利要求5-6任一所述的一种可滑动可合并单元格的Flutter图表展示方法,其特征在于,所述绘制当前行中所有的单元格视图,包括对当前行中的每个单元格均依次执行以下步骤:

8.根据权利要求2所述的一种可滑动可合并单元格的Flutter图表展示方法,其特征在于,所述绘制合并单元格视图,包括对目标表格中的每个合并单元格均依次执行以下步骤:

...

【技术特征摘要】

1.一种可滑动可合并单元格的flutter图表展示方法,其特征在于,包括以下步骤:

2.根据权利要求1所述的一种可滑动可合并单元格的flutter图表展示方法,其特征在于,所述数据模型包括默认列宽defaultcolumnwidth、特殊列宽{n1:m1,n2:m2,……}、每行的数据源和合并单元格的数据源,其中,

3.根据权利要求1所述的一种可滑动可合并单元格的flutter图表展示方法,其特征在于,所述计算目标表格中每行的高度tempheight,包括对目标表格中的每行均依次执行以下步骤:

4.根据权利要求3所述的一种可滑动可合并单元格的flutter图表展示方法,其特征在于,所述计算当前行中每个单元格高度,包括对当前行中的每个单元格均依次执行以下步骤:...

【专利技术属性】
技术研发人员:彭泽峰樊晓旺张海庆张彦志高敬刘长建
申请(专利权)人:北京沃德博创信息科技有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1