画图还是用Flutter的Canvas香，不信？自己来做个频谱图！

2023-10-26 04:51:15

使用Flutter的Canvas来绘制柱状频谱图，这可不是什么难事，不信？且随我一起来做一做。

前言

关于Flutter，之前写了两篇文章，第一篇Flutter如何和Native通信-Android视角简单说了一下如何使用Flutter和Native的通信通道：Platform Channels；第二篇Flutter插件(Plugin)开发 - Android视角讲了Flutter插件的开发。当然Flutter不是只有这些功能，Flutter UI方面也有很多亮点，比如Flutter Canvas。本篇就来聊聊Flutter Canvas怎么用来绘制柱状频谱图。

正文

柱状频谱图是一种常用的数据可视化形式，它可以将数据以柱状图的形式表示出来，从而直观地显示数据的分布情况。在Flutter中，我们可以使用Canvas来绘制柱状频谱图。

首先，我们需要创建一个CustomPainter类，这个类将负责绘制柱状频谱图。在CustomPainter类中，我们需要重写paint()方法，并在paint()方法中绘制柱状频谱图。

import 'package:flutter/material.dart';

class BarChartPainter extends CustomPainter {
  final List<double> data;

  BarChartPainter({required this.data});

  @override
  void paint(Canvas canvas, Size size) {
    // 计算柱状图的宽度和间距
    double barWidth = size.width / data.length;
    double spacing = barWidth * 0.2;

    // 遍历数据并绘制柱状图
    for (int i = 0; i < data.length; i++) {
      // 计算柱状图的高度
      double barHeight = data[i] * size.height;

      // 计算柱状图的起始坐标
      double x = i * barWidth + spacing;
      double y = size.height - barHeight;

      // 绘制柱状图
      canvas.drawRect(Rect.fromLTWH(x, y, barWidth - spacing, barHeight), Paint());
    }
  }

  @override
  bool shouldRepaint(BarChartPainter oldDelegate) {
    return data != oldDelegate.data;
  }
}

接下来，我们需要创建一个Widget来使用CustomPainter类绘制柱状频谱图。这个Widget可以是一个简单的Container，也可以是一个更复杂的Widget，比如一个带有标题和图例的图表。

import 'package:flutter/material.dart';

class BarChart extends StatelessWidget {
  final List<double> data;

  BarChart({required this.data});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 200,
      child: CustomPaint(
        painter: BarChartPainter(data: data),
      ),
    );
  }
}

最后，我们需要将BarChart Widget添加到我们的Flutter应用程序中。我们可以将BarChart Widget添加到任何需要显示柱状频谱图的页面中。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: BarChart(
            data: [10.0, 20.0, 30.0, 40.0, 50.0],
          ),
        ),
      ),
    );
  }
}