Flutter示波器功能插件oscilloscope的使用

示波器是一个图形化显示，类似于示波器上的波形，它将数据显示为滚动横跨屏幕。该组件使用一个List作为数据源，并将信息缩放以适应显示。请查看下面的示例以了解如何使用。

每次向数据集中添加一个值时，就会在轨迹上绘制一个新的点。这个轨迹从左到右延伸直到达到屏幕末端，此时轨迹会滚动以显示新的值。

可以使用以下值自定义显示：

• backgroundColor - 默认颜色为黑色。
• traceColor - 默认颜色为白色。
• margin - 默认值为EdgeInsets.all(10.0)。
• strokeWidth - 默认宽度为2.0。
• showYAxis - 显示或隐藏表示0轴线的线（默认为false）。
• yAxisColor - 如果设置了显示Y轴，则将以此颜色显示（默认为白色）。

其他设置包括：

• dataSet - 这是用于生成轨迹的数据集。
• yAxisMin - 一个指标来定义数据集中找到的最小值（默认为0.0）。
• yAxisMax - 一个指标来定义数据集中找到的最大值（默认为1.0）。

yAxisMin 和 yAxisMax 用于确定缩放因子，以便所有数据值都能显示。这些值可以被修改以改变数据显示的比例。

开始使用

要安装包，请访问 这里。

有关使用Flutter的更多信息，请参阅 官方文档。

示例代码

以下是使用示波器插件的完整示例代码：

import 'dart:async';
import 'dart:math';

/// 使用示波器插件的演示
///
/// 在此演示中，生成了两个显示以显示正弦和余弦的输出。
/// 示波器显示将显示数据集，这将填充Y轴，然后屏幕显示将“滚动”。
import 'package:flutter/material.dart';
import 'package:oscilloscope/oscilloscope.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Oscilloscope Display Example",
      home: Shell(),
    );
  }
}

class Shell extends StatefulWidget {
  [@override](/user/override)
  _ShellState createState() => _ShellState();
}

class _ShellState extends State<Shell> {
  List<double> traceSine = [];
  List<double> traceCosine = [];
  double radians = 0.0;
  Timer? _timer;

  /// 生成测试波形的方法
  /// 这给我们一个介于+1和-1之间的值，用于正弦和余弦
  _generateTrace(Timer t) {
    // 生成我们的值
    var sv = sin((radians * pi));
    var cv = cos((radians * pi));

    // 将值添加到数据集中
    setState(() {
      traceSine.add(sv);
      traceCosine.add(cv);
    });

    // 调整以循环利用弧度值（因为0等于2π弧度）
    radians += 0.05;
    if (radians >= 2.0) {
      radians = 0.0;
    }
  }

  [@override](/user/override)
  initState() {
    super.initState();
    // 创建一个定时器以生成测试值
    _timer = Timer.periodic(Duration(milliseconds: 60), _generateTrace);
  }

  [@override](/user/override)
  void dispose() {
    _timer!.cancel();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建一个正弦波形示波器
    Oscilloscope scopeOne = Oscilloscope(
      showYAxis: true,
      yAxisColor: Colors.orange,
      margin: EdgeInsets.all(20.0),
      strokeWidth: 1.0,
      backgroundColor: Colors.black,
      traceColor: Colors.green,
      yAxisMax: 1.0,
      yAxisMin: -1.0,
      dataSet: traceSine,
    );

    // 创建一个余弦波形示波器
    Oscilloscope scopeTwo = Oscilloscope(
      showYAxis: true,
      margin: EdgeInsets.all(20.0),
      strokeWidth: 3.0,
      backgroundColor: Colors.black,
      traceColor: Colors.yellow,
      yAxisMax: 1.0,
      yAxisMin: -1.0,
      dataSet: traceCosine,
    );

    // 生成一个Scaffold
    return Scaffold(
      appBar: AppBar(
        title: Text("OscilloScope Demo"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(flex: 1, child: scopeOne),
          Expanded(
            flex: 1,
            child: scopeTwo,
          ),
        ],
      ),
    );
  }
}