Flutter数字重映射插件num_remap的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter数字重映射插件 num_remap 的使用

num_remap 是一个用于 Dart 的库，实现了类似于 Arduino 中的 map 函数的功能，允许将一个范围内的数值重新映射到另一个范围内。该库不仅支持浮点数，还提供了整数版本的方法，并且可以对结果进行约束。

特性

remap 方法

将一个数值从一个范围重新映射到另一个范围。例如：

final remappedDouble = 0.5.remap(0.0, 1.0, -100.0, 100.0);

该方法不会对结果进行约束，因此可能会返回超出目标范围的值。

remapAndClamp 方法

与 remap 类似，但会对结果进行约束，使其始终在目标范围内：

final clampedValue = 150.remapAndClamp(0, 100, 0, 1); // 结果为 1.0

整数版本方法

提供 remapInt 和 remapAndClampInt 方法，确保返回值为整数：

final intValue = 75.remapInt(0, 100, 0, 10); // 结果为 7

isWithinRange 方法

判断一个数值是否在指定范围内：

final isInRange = 50.isWithinRange(0, 100); // 结果为 true

开始使用

添加依赖

首先，在 pubspec.yaml 文件中添加 num_remap 作为依赖项：

dependencies:
  num_remap: ^latest_version

然后运行 flutter pub get 来安装依赖。

导入库

在 Dart 文件中导入 num_remap 库：

import 'package:num_remap/num_remap.dart';

示例代码

以下是一个完整的示例程序，展示了如何使用 num_remap 库中的各种方法：

import 'package:num_remap/num_remap.dart';

void printSeparator() {
  print('-' * 16);
}

void main() {
  // 基本用法：简单重映射
  print(50.remap(0, 100, 100, 200)); // 输出 150.0
  print(150.remap(100, 200, 0.0, 1.0)); // 输出 0.5

  printSeparator();

  // 使用 remapAndClamp 对结果进行约束
  print(150.remap(0, 100, 0, 1)); // 输出 1.5
  print(150.remapAndClamp(0, 100, 0, 1)); // 输出 1.0（结果被限制在 0-1 范围内）

  printSeparator();

  // 可以设置“下限”大于“上限”
  print(150.remapAndClamp(0, 100, 1, 0)); // 输出 0.0（结果被限制在 1-0 范围内）
  print(150.remapAndClamp(100, 0, 1, 0)); // 输出 1.0（结果被限制在 1-0 范围内）

  printSeparator();

  // 使用整数版本的方法
  print(75.remapInt(0, 100, 0, 10)); // 输出 7（返回整数值）
  print(115.remapAndClampInt(0, 100, 0, 10)); // 输出 10（结果被限制在 0-10 范围内）
}

更多关于Flutter数字重映射插件num_remap的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter数字重映射插件num_remap的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用num_remap插件来进行数字重映射的示例代码。num_remap插件允许你将一个数值从一个范围映射到另一个范围。这在数据可视化、UI动画等方面非常有用。

首先，确保你已经在pubspec.yaml文件中添加了num_remap依赖：

dependencies:
  flutter:
    sdk: flutter
  num_remap: ^x.y.z  # 替换为最新的版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Dart文件中导入num_remap包，并使用它来进行数字重映射。下面是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('num_remap Demo'),
        ),
        body: Center(
          child: RemapDemo(),
        ),
      ),
    );
  }
}

class RemapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 原始数值
    double originalValue = 50;
    
    // 原始范围
    double originalMin = 0;
    double originalMax = 100;
    
    // 目标范围
    double targetMin = 0.0;
    double targetMax = 1.0;
    
    // 使用num_remap进行重映射
    double remappedValue = remap(originalValue, originalMin, originalMax, targetMin, targetMax);
    
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Original Value: $originalValue'),
        SizedBox(height: 20),
        Text('Remapped Value: $remappedValue'),
      ],
    );
  }
}

// 这是一个简单的封装函数，用于调用num_remap的功能。
// 实际上，你可以直接使用num_remap包提供的函数，这里为了清晰展示而封装了一下。
double remap(double value, double inMin, double inMax, double outMin, double outMax) {
  return (value - inMin) / (inMax - inMin) * (outMax - outMin) + outMin;
}

注意：实际上，num_remap包可能提供了一个更简洁的API来执行重映射操作，但上面的代码展示了核心思想，并且你可以根据num_remap的实际API进行调整。

由于num_remap包的API可能会随着版本更新而变化，因此建议查阅最新的num_remap包文档（假设该包存在且维护活跃）以获取最准确的使用方法和API参考。

如果你发现num_remap包并没有提供额外的功能，而是仅仅执行了上述的线性插值，那么你可以直接使用上述的remap函数，而无需额外依赖。

回到顶部