flutter怎么实现每隔一段时间读取一个数组然后画出折线图

Question

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:dartedflib/dartedflib.dart';

class ShenqiPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final axisPaint = Paint()
      ..color = Colors.white
      ..strokeWidth = 1
      ..style = PaintingStyle.fill
      ..strokeCap = StrokeCap.round;

    canvas.drawRect(
        Rect.fromCircle(center: const Offset(75, 75), radius: 75), axisPaint);
  }

  @override
  bool shouldRepaint(ShenqiPainter oldDelegate) => false;

  @override
  bool shouldRebuildSemantics(ShenqiPainter oldDelegate) => false;
}

class linesPainter extends CustomPainter {
  final List<double> widgets;

  linesPainter({required this.widgets});

  @override
  void paint(Canvas canvas, Size size) {
    final linesPaint = Paint()
      ..color = const Color.fromARGB(255, 232, 6, 6)
      ..strokeWidth = 0.5
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;

    int i, j;
    Path path1 = Path()..moveTo(0, 100);
    for (i = 0; i < widgets.length; i ++) {
      path1.lineTo(i.toDouble(), widgets[i]);
    }
    canvas.drawPath(path1, linesPaint);
    // for (i = 0; i <= 150; i += 10) {
    //   for (j = 0; j <= 150; j += 10) {
    //     canvas.drawLine(Offset(j, i), Offset(j + 10, i), linesPaint);
    //   }
    // }
  }

  @override
  bool shouldRepaint(linesPainter oldDelegate) => false;

  @override
  bool shouldRebuildSemantics(linesPainter oldDelegate) => false;
}

class myrun extends StatefulWidget {
  const myrun({super.key});

  @override
  State<myrun> createState() => _myrunState();
}

class _myrunState extends State<myrun> {
  late List<double> firstChannelData;
  List<double> shuzi = [25, 61, 85, 64, 98, 51];
  List<double> data = List.filled(100, 0.0);

  @override
  void initState() {
    super.initState();
    final edfReader = EdfReader("E:/test_subsecond.edf");

// 获取第一个通道的物理数据，如果需要，可以指定起始点和长度
    firstChannelData =
        edfReader.readSignal(0).map((num value) => value.toDouble()).toList();

    edfReader.close();
    
    int i;
    for(i=0;i<data.length;i++){
      data[i]=firstChannelData[i];
    }
      
    gengxin();
  }
  
  void gengxin(){
    const duration = Duration(milliseconds: 100);
      Timer.periodic(duration, (Timer t) {        
          updateData();
        }
      );
  }
  int j = 0;
  void updateData() {
    setState(() {
      data.removeAt(0);

      double lastPrice =
          firstChannelData[j]; // Assuming firstChannelData is your updated data
      data.add(lastPrice);
      j++;
      if (j > firstChannelData.length - 1) {
        j = 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: CustomPaint(
        painter: linesPainter(widgets:data),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('ECG Chart')),
      body: Padding(padding: EdgeInsets.all(80.0), child: myrun()),
    ),
  ));
}

有没有佬帮忙看看这个代码为什么实现不了功能

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

【您想要解决的问题】： 您想要解决的问题是在Flutter应用中实现每隔一段时间读取一个数组，并使用这些数据绘制折线图的功能。

【问题出现原因】：

1. 您的代码中Timer.periodic的使用可能不正确，因为您在updateData函数中没有正确地更新firstChannelData数组，而是在初始化时就将其复制到了data数组中。
2. setState可能没有正确触发界面的重新构建，因为shouldRepaint方法返回了false，这可能导致自定义绘制器没有按预期重新绘制。
3. 您的代码中没有正确处理数组边界，当j超过firstChannelData的长度时，您将其重置为0，这可能会导致数组越界。

【问题解决方案】：

1. 修改updateData函数，确保它正确地更新data数组的最后一个元素。
2. 在linesPainter类中，移除shouldRepaint方法的实现，或者将其返回值改为true，以确保每次状态更新时都会重新绘制。
3. 确保firstChannelData数组有足够的数据来绘制折线图。

【提供代码】： 以下是修改后的代码示例，它应该能够解决您的问题：

class _myrunState extends State<myrun> {
  List<double> data = <double>[];

  @override
  void initState() {
    super.initState();
    Timer.periodic(Duration(milliseconds: 100), (Timer t) {
      if (mounted) {
        updateData();
      }
    });
  }

  void updateData() {
    // 假设您有某种方法来获取最新的数据点
    double newDataPoint = ...; // 获取新的数据点
    setState(() {
      if (data.isNotEmpty) {
        // 移除数组中的第一个元素
        data.removeAt(0);
      }
      // 添加新的数据点到数组末尾
      data.add(newDataPoint);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: CustomPaint(
        painter: linesPainter(widgets: data),
      ),
    );
  }
}

class linesPainter extends CustomPainter {
  final List<double> widgets;

  linesPainter({required this.widgets});

  @override
  void paint(Canvas canvas, Size size) {
    ... // 保持其他绘制代码不变
  }

  @override
  bool shouldRepaint(linesPainter oldDelegate) => true; // 确保每次都会重绘
}

【代码运行方式】： 您需要在Flutter环境中运行此代码。如果您还没有设置Flutter开发环境，可以按照官方文档进行安装和配置：https://flutter.dev/docs/get-started/install。

【代码预期运行结果】： 预期结果是，您的应用将每隔100毫秒更新一次，从数组中移除第一个数据点，并在数组末尾添加一个新的数据点。折线图将根据这些数据点实时更新。

【推荐相关链接】：

• Flutter官方文档：https://flutter.dev/docs
• Fl_chart包文档：https://pub.dev/packages/fl_chart
• Dart语言官方文档：https://dart.dev/guides
• Flutter定时器Timer的官方文档：https://api.flutter.dev/flutter/dart-async/Timer-class.html