Flutter地图层级显示插件 level_map 的使用

level_map 是一个功能强大的Flutter库，用于在应用中添加层级地图（level-map）功能，并提供丰富的自定义选项。本文将详细介绍如何使用该插件，并提供一个完整的示例demo。

开始使用

添加依赖

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

dependencies:
  level_map: ^0.1.4

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

简单使用示例

下面是一个简单的示例，展示了如何使用 LevelMap 组件来创建一个层级地图：

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

class LevelMapPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return LevelMap(
      backgroundColor: Colors.limeAccent,
      levelMapParams: LevelMapParams(
        levelCount: 5,
        currentLevel: 2.4,
        currentLevelImage: ImageParams(
          path: "<image asset path here>",
          size: Size(40, 47),
        ),
        lockedLevelImage: ImageParams(
          path: "<image asset path here>",
          size: Size(40, 42),
        ),
        completedLevelImage: ImageParams(
          path: "<image asset path here>",
          size: Size(40, 42),
        ),
      ),
    );
  }
}

配置属性

LevelMapParams 属性

以下是 LevelMapParams 类的一些重要属性：

• levelCount: 总的层级数。
• currentLevel: 当前用户的层级，可以是小数表示处于两个层级之间。
• pathStrokeWidth: 路径线条的宽度，默认值为3。
• pathColor: 路径的颜色。
• levelHeight: 每个层级的高度，默认值为200。
• dashLengthFactor: 虚线长度因子，应该在0到0.5之间，默认值为0.025。
• enableVariationBetweenCurves: 是否启用曲线之间的变化，默认值为true。
• maxVariationFactor: 曲线之间的最大变化因子，默认值为0.2。
• showPathShadow: 是否显示路径阴影，默认值为false。
• shadowDistanceFromPathOffset: 阴影距离路径的偏移量，默认值为 Offset(-2, 12)。
• minReferencePositionOffsetFactor: 最小参考点偏移因子，默认值为 Offset(0.4, 0.3)。
• maxReferencePositionOffsetFactor: 最大参考点偏移因子，默认值为 Offset(1, 0.7)。
• bgImagesToBePaintedRandomly: 背景图像列表，将在随机位置绘制。
• startLevelImage: 起始层级的图像。
• completedLevelImage: 已完成层级的图像。
• currentLevelImage: 当前层级的图像。
• lockedLevelImage: 锁定层级的图像。
• pathEndImage: 路径结束时的图像。

ImageParams 属性

ImageParams 类用于配置每个层级图像的参数：

• path: 图像的资源路径。
• size: 图像的大小。
• imagePositionFactor: 图像接近页面中心的程度，应该在0到1之间，默认值为0.6。
• repeatCountPerLevel: 每个层级重复图像的次数，默认值为1。
• side: 图像相对于路径的位置，可以是左侧或右侧。

完整示例项目

以下是一个完整的示例项目，展示了一个更复杂的 LevelMap 使用案例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LevelMapPage(),
    );
  }
}

class LevelMapPage extends StatefulWidget {
  [@override](/user/override)
  _LevelMapPageState createState() => _LevelMapPageState();
}

class _LevelMapPageState extends State<LevelMapPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: LevelMap(
          backgroundColor: Colors.limeAccent,
          levelMapParams: LevelMapParams(
            levelCount: 4,
            currentLevel: 2.5,
            pathColor: Colors.black,
            currentLevelImage: ImageParams(
              path: "assets/images/current_black.png",
              size: Size(40, 47),
            ),
            lockedLevelImage: ImageParams(
              path: "assets/images/locked_black.png",
              size: Size(40, 42),
            ),
            completedLevelImage: ImageParams(
              path: "assets/images/completed_black.png",
              size: Size(40, 42),
            ),
            startLevelImage: ImageParams(
              path: "assets/images/Boy Study.png",
              size: Size(60, 60),
            ),
            pathEndImage: ImageParams(
              path: "assets/images/Boy Graduation.png",
              size: Size(60, 60),
            ),
            bgImagesToBePaintedRandomly: [
              ImageParams(
                path: "assets/images/Energy equivalency.png",
                size: Size(80, 80),
                repeatCountPerLevel: 0.5,
              ),
              ImageParams(
                path: "assets/images/Astronomy.png",
                size: Size(80, 80),
                repeatCountPerLevel: 0.25,
              ),
              ImageParams(
                path: "assets/images/Atom.png",
                size: Size(80, 80),
                repeatCountPerLevel: 0.25,
              ),
              ImageParams(
                path: "assets/images/Certificate.png",
                size: Size(80, 80),
                repeatCountPerLevel: 0.25,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.black,
          child: Icon(
            Icons.bolt,
            color: Colors.white,
          ),
          onPressed: () {
            setState(() {
              // 可以在这里更新层级或其他属性，以动态改变地图
            });
          },
        ),
      ),
    );
  }
}