Place Tracker 在鸿蒙平台的使用指南

Place Tracker是一款基于Flutter开发的地点追踪应用，集成Google Maps插件，提供地点管理和地图展示功能。主要特性包括：地点分类管理（收藏/已访问/想去）、双视图切换（地图/列表）、地点详情查看以及鸿蒙设备适配。技术架构采用Provider状态管理、GoRouter导航和Material 3设计规范。开发者可通过Git引入依赖包，配置Google Maps API密钥后即可

david

706人浏览 · 2025-12-20 17:05:05

david · 2025-12-20 17:05:05 发布

插件介绍

Place Tracker 是一个基于 Flutter 开发的地点追踪应用，它集成了 google_maps_flutter 插件，允许用户管理和追踪各种地点。

核心功能与特性

地点管理：追踪收藏地点、已访问地点和想去的地点
地图集成：在 Google 地图上显示地点标记
双视图切换：支持地图视图和列表视图两种展示方式
地点详情：查看每个地点的详细信息，包括评分、描述等
分类管理：按地点类别（收藏、已访问、想去）筛选查看
响应式设计：适配不同屏幕尺寸的鸿蒙设备

技术架构

使用 Provider 进行状态管理
使用 GoRouter 进行路由导航
使用 google_maps_flutter 实现地图功能
遵循 Material 3 设计规范

使用步骤

1. 包的引入

由于这是一个自定义修改版本，需要通过 Git 形式引入。在你的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter

  # Place Tracker 自定义包
  place_tracker:
    git:
      url: "https://atomgit.com/"
      path: "packages/place_tracker/place_tracker"

  # 必要的依赖项
  google_maps_flutter: ^2.2.0
  provider: ^6.0.2
  uuid: ^4.0.0
  go_router: ^10.0.0
  collection: ^1.16.0

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

2. 配置 Google Maps API 密钥

Place Tracker 需要 Google Maps API 密钥才能正常工作。请按照以下步骤配置：

Web 平台

在项目的 web/index.html 文件的 <head> 标签中添加：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>

鸿蒙平台适配注意事项

在鸿蒙平台上使用地图功能时，需要确保：

已在鸿蒙开发者控制台配置了网络访问权限
已配置应用的权限声明（在 module.json5 文件中）：

"module": {
  "abilities": [
    {
      "permissions": [
        {
          "name": "ohos.permission.INTERNET"
        }
      ]
    }
  ]
}

3. 初始化应用

在项目的 main.dart 文件中初始化 Place Tracker 应用：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:place_tracker/place_tracker_app.dart';

void main() {
  runApp(ChangeNotifierProvider(
    create: (context) => AppState(),
    child: const PlaceTrackerApp(),
  ));
}

API 调用和配置示例

1. 状态管理 API

Place Tracker 使用 AppState 类管理应用状态，主要 API 包括：

// 设置视图类型（地图/列表）
void setViewType(PlaceTrackerViewType viewType)

// 设置选中的地点分类
void setSelectedCategory(PlaceCategory newCategory)

// 更新地点列表
void setPlaces(List<Place> newPlaces)

2. 地点数据模型

class Place {
  final String id;
  final LatLng latLng;
  final String name;
  final PlaceCategory category;
  final String? description;
  final int starRating;

  // 构造函数和方法...
}

enum PlaceCategory {
  favorite,
  visited,
  wantToGo,
}

enum PlaceTrackerViewType {
  map,
  list,
}

3. 地图组件使用

// 在页面中使用地图组件
PlaceMap(center: LatLng(45.521563, -122.677433))

4. 列表组件使用

// 在页面中使用列表组件
PlaceList()

5. 地点详情页面

// 导航到地点详情页面
context.go('/place/${place.id}');

// 或者直接使用组件
PlaceDetails(place: place)

6. 鸿蒙平台主题适配

Place Tracker 支持鸿蒙平台的主题适配，可以通过以下方式配置：

MaterialApp.router(
  theme: ThemeData(
    useMaterial3: true,
    colorSchemeSeed: Colors.green,
    // 鸿蒙平台主题适配
    brightness: Brightness.light,
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    colorSchemeSeed: Colors.green,
    brightness: Brightness.dark,
  ),
  themeMode: ThemeMode.system, // 跟随系统主题
  // ...
)