Flutter尺寸测量插件flutter_unit_ruler的使用

Flutter尺寸测量插件flutter_unit_ruler的使用

flutter_unit_ruler 是一个功能强大的 Flutter 包，提供了可以测量多种单位（包括长度单位如千米、米、英尺、英寸和重量单位如千克、磅、吨）的数字标尺。此工具适用于建筑、健身、教育等领域，需要准确且交互式的测量显示。它提供了无缝定制选项，允许开发者设置单位类型、刻度间隔和视觉样式，使您可以轻松地将精确且用户友好的测量工具集成到您的应用中。

截图

垂直标尺
水平标尺

如何使用

以下示例演示了如何使用 flutter_unit_ruler 创建一个可定制的垂直标尺。你可以使用这个标尺来显示以英寸、厘米或其他自定义单位为单位的测量值。

添加依赖

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_unit_ruler:

导入包

导入必要的包：

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

代码示例

以下是一个完整的代码示例，用于创建一个以厘米为单位的标尺，并且随着滚动动态更新。

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

  @override
  State<RulerExample> createState() => _RulerExampleState();
}

class _RulerExampleState extends State<RulerExample> {
  final darkThemeColor = const Color(0xFF0b1f28); // 背景颜色
  late final ScaleController _scaleController; // 控制器，用于管理当前值

  double currentHeight = 180.0; // 初始高度值

  @override
  void initState() {
    _scaleController = ScaleController(value: currentHeight); // 初始化控制器
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: darkThemeColor,
      appBar: AppBar(
        title: const Text('Unit Ruler Demo'),
      ),
      body: Center(
        child: Stack(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 100.0),
              child: UnitRuler(
                height: 300, // 标尺的高度
                width: MediaQuery.of(context).size.width, // 标尺的宽度
                controller: _scaleController, // 使用标尺控制器进行动态更新
                scrollDirection: Axis.vertical, // 设置标尺方向为垂直
                backgroundColor: darkThemeColor, // 背景颜色
                scaleUnit: UnitType.length.centimeter, // 设置单位为厘米
                scaleAlignment: Alignment.topRight, // 将刻度对齐到右上角
                scalePadding: const EdgeInsets.only(left: 0, right: 40, top: 10), // 刻度的内边距
                scaleMargin: 120, // 刻度的位置间距
                scaleMarker: Container(
                  height: 2,
                  width: 240,
                  color: const Color(0xFF3EB48C), // 刻度标记的颜色
                ),
                scaleMarkerPositionTop: 10, // 刻度标记的顶部位置
                scaleMarkerPositionLeft: 20, // 刻度标记的左侧位置
                scaleIntervalText: (index, value) => value.toInt().toString(), // 刻度间隔文本格式化
                scaleIntervalTextStyle: const TextStyle(
                  color: Color(0xFFBCC2CB),
                  fontSize: 14,
                ),
                scaleIntervalTextPosition: 80, // 刻度间隔文本的位置
                scaleIntervalStyles: const [
                  ScaleIntervalStyle(color: Colors.yellow, width: 35, height: 2, scale: -1),
                  ScaleIntervalStyle(color: Colors.blue, width: 50, height: 2.5, scale: 0),
                  ScaleIntervalStyle(color: Colors.redAccent, width: 40, height: 2, scale: 5),
                ],
                onValueChanged: (value) => setState(() => currentHeight = value.toDouble()), // 更新高度值
              ),
            ),
            Positioned(
              bottom: 220,
              left: 110,
              child: Text(
                "${currentHeight.toInt()} ${UnitType.length.centimeter.symbol}",  // 显示当前高度值（厘米）
                style: const TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键特性

  • 可定制单位：您可以指定单位，例如 UnitType.length.centimeter，或者根据需要定义自己的单位。

    • 对于自定义单位，使用 scaleUnit 参数定义属性：
    scaleUnit: ScaleUnit(
  name: 'inch',
  symbol: 'in',
  subDivisionCount: 12,
  scaleIntervals: List.generate(
    10, 
    (i) => ScaleIntervals(begin: i * 12, end: (i + 1) * 12, scale: 1)),
)

  • 动态值更新：通过 ScaleController，您可以实时监控并动态更新标尺值。这个功能非常适合需要精确跟踪的应用，比如健身或建筑应用，其中当前测量值需要频繁调整和显示。

  • 灵活的样式选项：

    • 可以通过广泛的样式选项自定义标尺的外观：
    • 背景颜色：调整标尺背景颜色以匹配您的应用主题。
    • 对齐方式与内边距：控制对齐方式、内边距和间距，以便将标尺放置在应用中的正确位置。
    • 刻度标记样式：通过自定义宽度、高度、颜色和位置修改刻度标记的外观。
    • 刻度间隔文本样式：通过自定义字体大小、颜色和位置来自定义刻度间隔标签，确保与您的应用设计的一致性和可读性。

使用方法

使用上述示例在您的应用中实现可滚动的垂直或水平标尺。通过修改参数如 scrollDirection 和 scaleUnit 进行其他配置，并根据您的应用主题自由设置标尺的刻度标记和刻度间隔文本样式。

提交拉取请求

欢迎提交拉取请求。通常我会在24到48小时内响应任何问题或请求。

  • 请保持PR标题易于阅读并描述更改，这将使它们更容易合并。
  • 拉取请求必须针对 develop 分支。任何其他分支（除非由维护者指定）将被拒绝。

创建 & 维护

如果您觉得这个项目有用或从源码中学到了东西，并想感谢我，考虑请我喝杯咖啡。

  • PayPal

许可证

Copyright (c) 2024 [Mohammad Saboor]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

更多关于Flutter尺寸测量插件flutter_unit_ruler的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter尺寸测量插件flutter_unit_ruler的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用Flutter尺寸测量插件flutter_unit_ruler的代码案例。这个插件可以帮助你在Flutter应用中测量屏幕上的元素尺寸。

首先，你需要在你的pubspec.yaml文件中添加flutter_unit_ruler依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_unit_ruler: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中使用这个插件。下面是一个简单的示例，展示如何使用flutter_unit_ruler来测量一个容器的宽度和高度。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Unit Ruler Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double? containerWidth;
  double? containerHeight;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Unit Ruler Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.amber,
              width: 200,
              height: 100,
              child: Ruler(
                onResult: (size) {
                  setState(() {
                    containerWidth = size.width;
                    containerHeight = size.height;
                  });
                },
                child: Center(
                  child: Text(
                    'Measure Me',
                    style: TextStyle(fontSize: 24),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
            Text(
              'Container Width: $containerWidth\nContainer Height: $containerHeight',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 添加依赖：在pubspec.yaml中添加flutter_unit_ruler依赖。
  2. 创建应用：创建一个简单的Flutter应用，包含一个Container，其宽度和高度分别设置为200和100。
  3. 使用Ruler组件：在Container内部使用Ruler组件，它会测量其子组件的尺寸。当尺寸测量完成时，onResult回调会被触发，我们在这里更新containerWidth和containerHeight的值。
  4. 显示测量结果：在Container下方显示测量结果。

请注意，这个示例中的Ruler组件是假设flutter_unit_ruler插件提供的一个组件，用于测量其子组件的尺寸。实际使用时，你可能需要参考flutter_unit_ruler的官方文档，以确保正确使用其API，因为插件的具体实现和API可能会有所不同。

如果你发现flutter_unit_ruler插件没有提供Ruler组件或类似的API，那么你可能需要查看插件的源代码或文档，以了解如何正确使用该插件进行尺寸测量。

回到顶部