Flutter for OpenHarmony 视力保护提醒App实战 - fl_chart图表库使用

2501_944396192026-02-01 9:29

概述

fl_chart是Flutter中最流行的图表库，它提供了多种图表类型，包括柱状图、线性图、饼图等。在视力保护提醒应用中，我们使用fl_chart来展示数据统计和分析结果，帮助用户直观地了解用眼习惯和眼睛健康状况。通过图表的可视化展示，用户可以更清楚地看到每周的提醒完成情况、眼睛疲劳度的变化趋势，以及不同类型提醒的分布比例。本文将详细讲解如何使用fl_chart创建各种图表，包括柱状图、线性图、饼图等功能，并展示如何在实际应用中集成这些图表组件。

fl_chart的核心功能

fl_chart主要提供以下功能：

  1. 柱状图 - 用于展示分类数据的对比
  2. 线性图 - 用于展示数据的趋势变化
  3. 饼图 - 用于展示数据的比例分布
  4. 自定义样式 - 支持丰富的样式自定义选项

这些功能结合在一起，为应用提供了一个完整的数据可视化解决方案。

项目依赖配置

在pubspec.yaml中，我们已经配置了所需的依赖：

dart 复制代码 
dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.65.0
  flutter_screenutil: ^5.9.0

fl_chart库提供了图表功能，flutter_screenutil用于屏幕适配。这些依赖都是为了支持鸿蒙系统的Flutter开发。

柱状图实现

柱状图用于展示分类数据的对比，例如每周的提醒次数。柱状图能够直观地展示不同类别数据的大小关系，使用户能够快速比较各个数据点。在视力保护应用中，我们可以用柱状图展示每周各天的提醒次数、用眼时长等数据。下面我们分别介绍柱状图的容器构建、数据配置和样式设置。

柱状图容器构建

dart 复制代码 
Widget _buildBarChart() {
  return Container(
    margin: EdgeInsets.all(16.w),
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.r),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.1),
          blurRadius: 8,
          offset: const Offset(0, 2),
        ),
      ],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '周提醒统计',
          style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 16.h),

这段代码构建了柱状图的容器。通过Container设置背景颜色、圆角和阴影。通过Column组织标题和图表。Text显示图表标题。SizedBox提供间距。这种设计创建了一个视觉上清晰的图表容器。

柱状图数据和样式

dart 复制代码 
        SizedBox(
          height: 200.h,
          child: BarChart(
            BarChartData(
              alignment: BarChartAlignment.spaceAround,
              maxY: 100,
              barTouchData: BarTouchData(enabled: true),
              titlesData: FlTitlesData(
                show: true,
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    getTitlesWidget: (value, meta) {
                      const titles = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                      return Text(
                        titles[value.toInt()],
                        style: TextStyle(fontSize: 10.sp),
                      );
                    },
                  ),
                ),
                leftTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    getTitlesWidget: (value, meta) {
                      return Text(
                        '${value.toInt()}',
                        style: TextStyle(fontSize: 10.sp),
                      );
                    },
                  ),
                ),
              ),

BarChart是fl_chart提供的柱状图组件，它能够灵活地配置各种图表参数。BarChartData定义了图表的数据和样式，是整个柱状图的核心配置对象。alignment设置柱子的对齐方式，spaceAround表示柱子之间均匀分布。maxY定义了Y轴的最大值，用于确定图表的显示范围。barTouchData启用点击交互，用户可以点击柱子查看详细信息。titlesData定义了坐标轴标签的显示方式。bottomTitles定义了X轴标签，通过getTitlesWidget回调函数动态生成标签文本，显示周一到周日。leftTitles定义了Y轴标签，显示数值。这种设计提供了完整的图表配置。

柱状图数据组

dart 复制代码 
              barGroups: [
                _buildBarGroup(0, 45),
                _buildBarGroup(1, 52),
                _buildBarGroup(2, 48),
                _buildBarGroup(3, 56),
                _buildBarGroup(4, 58),
                _buildBarGroup(5, 62),
                _buildBarGroup(6, 55),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

BarChartGroupData _buildBarGroup(int x, double y) {
  return BarChartGroupData(
    x: x,
    barRods: [
      BarChartRodData(
        toY: y,
        color: const Color(0xFF2196F3),
        width: 12.w,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(4.r),
          topRight: Radius.circular(4.r),
        ),
      ),
    ],
  );
}

barGroups定义了每个柱子的数据，通过数组的方式传入多个柱子的配置。_buildBarGroup方法是一个工厂方法，用于创建单个柱子的配置对象，这样可以减少代码重复。BarChartGroupData定义了柱子的位置和数据，x参数表示柱子在X轴上的位置。BarChartRodData定义了柱子的样式和数据，toY参数表示柱子的高度值。color定义了柱子的颜色，width定义了柱子的宽度。borderRadius定义了柱子顶部的圆角，使柱子看起来更加圆润。这种设计提供了灵活的柱子配置。

线性图实现

线性图用于展示数据的趋势变化，例如每周的眼睛疲劳度变化。相比柱状图，线性图更适合展示连续的数据变化趋势，能够让用户直观地看到数据的上升或下降趋势。在视力保护应用中，我们可以用线性图展示用户的疲劳度、用眼时长等随时间变化的数据。线性图通常包含多条线条，每条线条代表一个数据序列。我们可以通过不同的颜色来区分不同的数据序列，并通过曲线连接数据点来展示趋势。

dart 复制代码 
Widget _buildLineChart() {
  return Container(
    margin: EdgeInsets.all(16.w),
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.r),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.1),
          blurRadius: 8,
          offset: const Offset(0, 2),
        ),
      ],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '疲劳度趋势',

这段代码实现了UI界面的构建。通过组合多个Flutter Widget组件，我们可以创建复杂的用户界面。这样可以提高代码的可维护性和复用性。在实际应用中，这种模块化的UI构建方式能够加快开发效率。

dart 复制代码 
          style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 16.h),
        SizedBox(
          height: 200.h,
          child: LineChart(
            LineChartData(
              gridData: FlGridData(show: true),
              titlesData: FlTitlesData(
                show: true,
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    getTitlesWidget: (value, meta) {
                      const titles = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
                      return Text(
                        titles[value.toInt()],
                        style: TextStyle(fontSize: 10.sp),
                      );
                    },
                  ),
                ),
              ),
              lineBarsData: [
                LineChartBarData(
                  spots: [
                    const FlSpot(0, 30),
                    const FlSpot(1, 35),
                    const FlSpot(2, 32),
                    const FlSpot(3, 40),
                    const FlSpot(4, 45),
                    const FlSpot(5, 42),
                    const FlSpot(6, 38),
                  ],
                  isCurved: true,
                  color: const Color(0xFF4CAF50),
                  barWidth: 2,
                  dotData: FlDotData(show: true),
                  belowBarData: BarAreaData(
                    show: true,
                    color: const Color(0xFF4CAF50).withOpacity(0.2),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

线性图使用LineChart组件来显示。LineChartData定义了图表的数据和样式，是线性图的核心配置对象。gridData设置为FlGridData(show: true)表示显示网格线，这样可以更清楚地读取数据值。titlesData定义了坐标轴标签，bottomTitles定义了X轴标签。lineBarsData定义了线条的数据，可以包含多条线条。spots定义了每个数据点的坐标，FlSpot(x, y)表示在x位置的y值。isCurved设置为true表示使用曲线连接数据点，而不是直线。color定义了线条的颜色。dotData设置为FlDotData(show: true)表示显示数据点。belowBarData定义了线条下方的填充区域，使用半透明的颜色填充，这样可以更加直观地展示数据。

饼图实现

饼图用于展示数据的比例分布，例如不同类型提醒的比例。饼图能够直观地展示各个部分占整体的比例，使用户能够快速了解数据的构成。在视力保护应用中，我们可以用饼图展示不同类型提醒的分布、不同时段的用眼时长比例等。饼图通常使用不同的颜色来区分不同的数据部分，并在每个部分旁边显示标签和数值。通过合理的颜色搭配和标签设置，饼图能够提供清晰的数据展示效果。

dart 复制代码 
Widget _buildPieChart() {
  return Container(
    margin: EdgeInsets.all(16.w),
    padding: EdgeInsets.all(16.w),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.r),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.1),
          blurRadius: 8,
          offset: const Offset(0, 2),
        ),
      ],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '提醒类型分布',

这段代码实现了UI界面的构建。通过组合多个Flutter Widget组件，我们可以创建复杂的用户界面。这样可以提高代码的可维护性和复用性。在实际应用中，这种模块化的UI构建方式能够加快开发效率。

dart 复制代码 
          style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 16.h),
        SizedBox(
          height: 200.h,
          child: PieChart(
            PieChartData(
              sections: [
                PieChartSectionData(
                  value: 40,
                  title: '工作',
                  color: const Color(0xFF2196F3),
                  radius: 50.r,
                ),
                PieChartSectionData(
                  value: 30,
                  title: '学习',
                  color: const Color(0xFF4CAF50),
                  radius: 50.r,
                ),
                PieChartSectionData(
                  value: 20,
                  title: '娱乐',
                  color: const Color(0xFFFFC107),
                  radius: 50.r,
                ),
                PieChartSectionData(
                  value: 10,
                  title: '其他',
                  color: const Color(0xFF00BCD4),
                  radius: 50.r,
                ),
              ],
              centerSpaceRadius: 40.r,
            ),
          ),
        ),
      ],
    ),
  );
}

饼图使用PieChart组件来显示。PieChartData定义了图表的数据和样式，是饼图的核心配置对象。sections定义了每个扇形的数据，通过数组的方式传入多个扇形的配置。PieChartSectionData定义了单个扇形的数据和样式。value表示该扇形的数值，这个值会被用来计算扇形占整个圆的比例。title表示扇形的标签，会显示在饼图上。color表示扇形的颜色，通过不同的颜色可以区分不同的数据部分。radius表示扇形的半径。centerSpaceRadius定义了饼图中心的空心半径，设置这个值可以创建一个甜甜圈形状的饼图，看起来更加美观。

图表交互

fl_chart支持多种交互功能，例如点击、悬停等。通过启用交互功能，用户可以与图表进行交互，获取更多的信息。例如，用户可以点击柱状图的柱子来查看具体的数值，或者悬停在数据点上查看提示信息。这些交互功能能够提升用户体验，使应用更加易用。下面我们展示如何在柱状图中启用点击交互和悬停提示。

dart 复制代码 
BarChartData(
  barTouchData: BarTouchData(
    enabled: true,
    touchTooltipData: BarTouchTooltipData(
      tooltipBgColor: Colors.black87,
      getTooltipItem: (group, groupIndex, rod, rodIndex) {
        return BarTooltipItem(
          '${rod.toY.toStringAsFixed(0)}',
          const TextStyle(color: Colors.white),
        );
      },
    ),
  ),
)

使用barTouchData可以启用点击交互。touchTooltipData定义了悬停时显示的提示信息。

屏幕适配处理

在整个图表中，我们使用flutter_screenutil库来处理屏幕适配。.w表示宽度单位，.h表示高度单位，.sp表示字体大小单位。这样可以确保在不同屏幕尺寸的设备上，图表都能正确显示。

例如，SizedBox(height: 200.h)表示高度为200个高度单位。TextStyle(fontSize: 10.sp)表示字体大小为10个字体单位。

总结

fl_chart是一个强大的图表库，它提供了多种图表类型和丰富的自定义选项。通过使用fl_chart，我们可以轻松地创建各种图表来展示数据。通过flutter_screenutil库，我们确保了图表在不同屏幕尺寸上的正确显示。

在视力保护提醒应用中，我们使用fl_chart来展示数据统计和分析结果，帮助用户更好地了解自己的用眼情况。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

相关推荐
不爱吃糖的程序媛4 小时前
2026年鸿蒙跨平台开发：Flutter、React Native 及其他框架前瞻
flutter·react native·harmonyos
一起养小猫4 小时前
Flutter for OpenHarmony 实战：网络请求与JSON解析完全指南
网络·jvm·spring·flutter·json·harmonyos
爱吃大芒果4 小时前
Flutter for OpenHarmony实战 : mango_shop API 客户端的封装与鸿蒙网络权限适配
网络·flutter·harmonyos
idwangzhen5 小时前
GEO优化系统哪家好
python·信息可视化
爱吃大芒果5 小时前
Flutter for OpenHarmony 实战：mango_shop 项目初始化与目录架构搭建
flutter·架构·dart
爱吃大芒果5 小时前
Flutter for OpenHarmony 实战: mango_shop 通用组件库的封装与跨端复用
开发语言·flutter·dart
雨季6665 小时前
Flutter 三端应用实战：OpenHarmony “安全文本溢出处理调节器”
开发语言·前端·安全·flutter·交互
2301_788715625 小时前
Flutter for OpenHarmony现代智慧养老App实战：天气预报实现
flutter
雨季6665 小时前
Flutter 三端应用实战：OpenHarmony “极简安全文本对齐调节器”
开发语言·前端·javascript·安全·flutter·交互
热门推荐
01GitHub 镜像站点02Clawdbot 中文汉化版 接入微信、飞书03OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)042026美赛A题智能手机电池续航时间预测的连续时间数学模型052025 年大语言模型发展回顾：关键突破、意外转折与 2026 年展望06【Milvus】向量数据库pymilvus使用教程072026数学建模美赛题目特点与选题建议，常用四大模型汇总08Claude Code Skills 实用使用手册09一种新的LCA算法10Linux下V2Ray安装配置指南