SuperAPI AI 工具集

syncfusion-flutter-treemap

编程与开发

查看项目

更新于 10-16 02:05

技能介绍

用途

本技能指导在 Flutter 应用中实现 Syncfusion Flutter TreeMap(SfTreemap)组件。该组件使用嵌套矩形展示层级与比例数据,每个矩形的尺寸与某个定量数值成比例,便于跨类别和跨层级比较数值。适用于仪表盘、分析与数据探索界面,例如文件系统可视化、按类别拆分的预算、市场份额分析、带指标的组织层级、资源分配、投资组合构成,以及按地区/产品/类别的销售数据。

主要能力

  • 多种布局算法:Squarified(默认)、Slice、Dice。注意布局由所使用的构造函数决定,而非属性:SfTreemap() 为 squarified(默认),SfTreemap.slice() 为 slice,SfTreemap.dice() 为 dice。
  • 数据结构支持:同时支持扁平与层级结构。
  • 可定制标签:可将任意 Flutter widget 用作标签。
  • 交互功能:选择、工具提示、点击事件。
  • 颜色映射:基于数值与基于区间的着色。
  • 图例支持:条形图例与渐变色图例。
  • 下钻导航:在层级间导航。
  • 无障碍:RTL 支持、语义标签。
  • 主题:颜色与样式可完全定制。

使用方式

核心属性包括 dataCount(数据源数据点数量)、weightValueMapper(返回决定矩形尺寸的数值的回调)、levels(List,层级配置)。TreemapLevel 的常用属性包括 groupMapper(为本层级分组数据)、labelBuilder(自定义标签 widget 构建器)、tooltipBuilder(自定义工具提示 widget 构建器)、color(本层级默认矩形颜色)、border(矩形边框样式)、padding(矩形周围内边距)。

可选配置包括 colorMappers(基于数值或区间的着色)、legend(图例 widget 配置)、onSelectionChanged(选择事件处理)、layoutDirection(在左上、右上、左下、右下方向布局矩形,默认 topLeft)、sortAscending(按权重排序矩形,仅 slice/dice 有效)。

基础示例可参考官方资料中的最小可用代码:import material 与 syncfusion_flutter_treemap/treemap.dart,构造 SfTreemap,设置 dataCount、weightValueMapper 以及包含 TreemapLevel 的 levels 列表,并在 TreemapLevel 中使用 groupMapper 与 labelBuilder。

常见模式包括:多层级数据与下钻;基于数值区间的颜色映射并配合 TreemapLegend.bar();通过 onSelectionChanged 与 tooltipBuilder 实现交互。

官方资料提供以下参考文档导航:

  • references/getting-started.md:包安装与设置、向 pubspec.yaml 添加依赖、导入 treemap 包、创建第一个 treemap、基础数据源结构、关键属性(dataCount、weightValueMapper、levels)、最小可用示例。
  • references/layouts.md:理解布局算法、squarified(默认,均衡矩形)、slice(水平划分)、dice(垂直划分)、各布局适用时机、性能注意事项、切换布局。
  • references/hierarchical-data.md:扁平与层级数据结构、配置 TreemapLevel 进行分组、使用 groupMapper 组织数据、使用 weightValueMapper 设置矩形尺寸、创建多级层级、dataCount 属性用法、构建复杂嵌套数据。
  • references/labels-customization.md:使用 labelBuilder 添加标签、TreemapTile 属性与数据访问、自定义标签 widget、标签定位与内边距、文本样式与格式化、条件显示标签、响应式标签尺寸。
  • references/colors-theming.md:颜色映射概览、基于数值的颜色映射、基于区间的颜色映射、渐变支持、主题集成、自定义调色板、按矩形自定义颜色。
  • references/tooltip-selection.md:使用 tooltipBuilder 创建工具提示、自定义工具提示 widget 与样式、启用矩形选择、处理 onSelectionChanged 事件、高亮选中矩形、多选支持、触摸与悬停交互。
  • references/legend.md:添加 TreemapLegend widget、条形图例与渐变图例、图例位置(上、下、左、右)、图标与文本定制、图例项样式、与颜色映射器集成。
  • references/drilldown.md:实现下钻行为、使用 onTap 回调、在层级数据中导航、管理下钻状态、构建面包屑导航、返回/向上导航、保留用户上下文。
  • references/advanced-features.md:使用 itemBuilder 自定义矩形 widget、RTL 支持、无障碍功能、键盘导航、性能优化技巧、响应式设计模式、与状态管理集成。

适用场景

  • 预算仪表盘:按部门与子类别展示组织预算拆分,并按支出水平着色。适用于多级预算跟踪、资源分配。
  • 销售分析:跨地区、国家和产品可视化销售数据并支持下钻。适用于地区销售对比、市场分析、绩效仪表盘。
  • 文件系统可视化:按文件夹与文件按比例展示磁盘空间占用。适用于存储分析、文件管理工具、磁盘清理工具。
  • 市场份额分析:展示不同公司、产品或类别的市场份额数据。适用于竞争分析、投资组合构成、市场研究。
  • 组织层级:展示组织结构及人均、预算等指标。适用于 HR 仪表盘、资源规划、组织架构可视化。

限制与注意事项

  • 布局算法由构造函数决定,不是属性,不能通过属性切换。
  • sortAscending 仅对 slice/dice 布局有效。
  • 资料中的排错提示:若矩形不可见,检查 dataCount 是否与数据长度一致、weightValueMapper 是否返回正数、groupMapper 是否返回非 null 字符串;若标签不显示,需添加 labelBuilder 并确认标签尺寸与文字颜色;若颜色未生效,检查 colorMappers 的数值范围与类型,并在使用颜色映射器时配置图例;若选择无效,添加 onSelectionChanged 回调并调用 setState 重建。
  • 文档中未提供包的具体安装命令、价格、平台版本支持等信息,暂未提供。