Flutter相位图绘制插件phasor_diagram的使用

描述

phasor_diagram 是一个用于绘制三相电气系统相位图的 Flutter 插件。相位图是电气工程中用来表示电压和电流之间关系的一种图形化工具。它由三个电压矢量（用 U 表示）和三个电流矢量（用 I 表示）组成。

在 PhasorDiagram 中，电压和电流都以矢量的形式表示。每个矢量被绘制为一条带箭头的线段。

• 矢量的长度表示其强度。
• 矢量的角度表示其相对于假想 x 轴的方向。
• 电压矢量用蓝色表示，电流矢量用红色表示。

使用方法

所有属性都是必需的。size 必须大于或等于 100.0，其余属性不能有负值。

示例代码

PhasorDiagram(
  size: 250.0, // 相位图的大小
  phaseOneVoltageValue: 220.0, // 第一相电压强度
  phaseOneVoltageAngle: 0.0, // 第一相电压角度
  phaseTwoVoltageValue: 220.0, // 第二相电压强度
  phaseTwoVoltageAngle: 120.0, // 第二相电压角度
  phaseThreeVoltageValue: 220.0, // 第三相电压强度
  phaseThreeVoltageAngle: 240.0, // 第三相电压角度
  phaseOneCurrentValue: 1.1, // 第一相电流强度
  phaseOneCurrentAngle: 15.0, // 第一相电流角度
  phaseTwoCurrentValue: 1.1, // 第二相电流强度
  phaseTwoCurrentAngle: 135.0, // 第二相电流角度
  phaseThreeCurrentValue: 1.1, // 第三相电流强度
  phaseThreeCurrentAngle: 255.0, // 第三相电流角度
)

完整示例代码

以下是一个完整的 Flutter 应用程序示例，展示如何使用 phasor_diagram 插件绘制相位图。

import 'package:flutter/material.dart';
import 'package:phasor_diagram/phasor_diagram.dart'; // 导入phasor_diagram插件

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 移除调试标志
      title: 'Phasor Diagram Example', // 应用标题
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), // 设置主题颜色
        useMaterial3: true,
      ),
      home: const MyHomePage(), // 主页面
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState(); // 初始化状态
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue, // 设置导航栏背景颜色
        centerTitle: true, // 标题居中
        automaticallyImplyLeading: false, // 隐藏返回按钮
        title: const Text(
          'Phasor Diagram', // 标题文本
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
      body: Center(
        child: PhasorDiagram(
          size: MediaQuery.of(context).size.width * 0.8, // 设置相位图大小为屏幕宽度的80%
          phaseOneVoltageValue: 220.0, // 第一相电压强度
          phaseOneVoltageAngle: 0.0, // 第一相电压角度
          phaseTwoVoltageValue: 220.0, // 第二相电压强度
          phaseTwoVoltageAngle: 60.0, // 第二相电压角度
          phaseThreeVoltageValue: 220.0, // 第三相电压强度
          phaseThreeVoltageAngle: 300.0, // 第三相电压角度
          phaseOneCurrentValue: 1.1, // 第一相电流强度
          phaseOneCurrentAngle: 180.0, // 第一相电流角度
          phaseTwoCurrentValue: 1.1, // 第二相电流强度
          phaseTwoCurrentAngle: 120.0, // 第二相电流角度
          phaseThreeCurrentValue: 1.1, // 第三相电流强度
          phaseThreeCurrentAngle: 240.0, // 第三相电流角度
        ),
      ),
    );
  }
}