Flutter尺子测量工具插件real_ruler的使用

在本教程中，我们将详细介绍如何在Flutter项目中使用real_ruler插件来创建一个虚拟尺子。通过real_ruler插件，您可以轻松地在屏幕上显示一个与现实世界中厘米或英寸等比例的虚拟尺子。

概述

real_ruler 是一个用于在Flutter应用中显示虚拟尺子的插件。它可以模拟真实尺子的效果，并支持多种配置选项，如单位（厘米或英寸）、刻度数量等。

使用场景

• 在教育类应用中展示尺子功能。
• 在设计类应用中辅助用户测量尺寸。
• 在娱乐类应用中增加趣味性。

安装插件

首先，在您的pubspec.yaml文件中添加real_ruler依赖：

dependencies:
  real_ruler: ^1.0.0

然后运行以下命令以安装依赖：

flutter pub get

基本用法

Ruler.count

Ruler.count 用于根据给定的距离创建一个尺子。例如，以下代码将显示一个长度为10厘米的尺子：

Ruler.count(10.cm),

Ruler.dynamic

Ruler.dynamic 用于创建一个固定宽度的尺子，适用于屏幕上的特定区域。例如，以下代码将在屏幕中显示一个300像素宽的尺子：

Ruler.dynamic(300.cm),

Ruler.real

Ruler.real 用于创建一个与真实生活中的尺子等比例的虚拟尺子。例如，以下代码将显示一个以厘米为单位的真实尺子：

Ruler.real(system: MeasureSystem.metric),

动态双面尺子

DynamicDoubleSidedRuler 用于创建一个动态的双面尺子。例如，以下代码将显示一个红色的正方形容器，并在其两侧显示尺子刻度：

DynamicDoubleSidedRuler(
  cmWidth: 100,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
);

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用real_ruler插件：

import 'package:flutter/material.dart';
import 'package:real_ruler/real_ruler.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.dark,
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    const padding = SizedBox.square(dimension: 40);

    return Scaffold(
      appBar: AppBar(title: const Text("Rulers")),
      body: ListView(
        children: [
          Ruler.count(1.cm), // 1厘米

          /// 10厘米
          Ruler.count(10.cm),
          padding,

          /// 5英寸，每英寸10个刻度
          Ruler.count(5.inch(10)),
          padding,

          /// 24英寸刻度，每英寸8个刻度
          Ruler.count(24.inchGraduation(8)),
          padding,

          /// 4英寸刻度，每英寸8个刻度
          Ruler.count(4.inchGraduation(8)),
          padding,

          /// 每厘米100像素
          Ruler.dynamic(100.cm),
          padding,

          /// 真实生活中的厘米尺子
          Ruler.real(system: MeasureSystem.metric),
          padding,

          /// 双面动态尺子
          DynamicDoubleSidedRuler(
            cmWidth: 100,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
          ),
          padding,

          /// 垂直方向的双面动态尺子
          SizedBox(
            height: 100,
            child: DynamicDoubleSidedRuler(
              cmWidth: 100,
              rulersAxis: Axis.vertical,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }
}