Flutter中实现中国省份地图

news2024/9/28 19:33:13

效果展示(这里只展示局部，完全展示违规)：

可以点击省份改变颜色，更多功能可以自行拓展。

在这里插入图片描述

注：非完整中国地图！！！

本文用于记录在Flutter项目中安卓端实现中国地图，因为实现过程是通过Flutter调用安卓原生代码实现，所以IOS端不可用，通过本文你还可以学会如何通过Platform Channels在Flutter代码中调用这些原生代码。

在Flutter中打开android文件夹

右键android 文件夹，选择flutter -> Open Android module in Android Studio
在这里插入图片描述
点击后就会像打开一个纯Android项目一样（当然还是有些差别的，多了些Flutter相关东西），在这个界面中可以编写原生代码和相应插件。

如果你是第一次打开，它会下载gradle和一大堆构建项目需要的东西，要等好长一会（这个时候你可以买杯咖啡等它构建完成：）），当然过程可能不是那么的顺利，比如你下载gradle过程中会报下面错误(如果没有则忽略下面步骤)：

gradle Connect timed out

方法一：

然后我就尝试修改仓库配置为阿里镜像：

allprojects {
    repositories {
        google()
        maven { url "https://jitpack.io" }
        mavenCentral()
        maven { url "https://maven.aliyun.com/repository/public" } //jcenter & central
    }
}

结果还是一样，科学上网打开也一样，此方法无效！

方法二：

在https://services.gradle.org/distributions/ 网址中找到你项目中对应的Gradle版本并下载下来。

解压下载的文件并将其放到你的C:/Users/{用户名}/.gradle/wrapper/dists/gradle-{版本号}-all/{随机字符串}目录下。

如果你不确定应该下载哪个版本的Gradle，你可以查看你的Android工程中的gradle/wrapper/gradle-wrapper.properties文件，该文件中的distributionUrl属性就是你需要的Gradle版本。

可能你的.gradle文件夹移到别的地方了，毕竟这个文件夹占用内存太大，正经人谁放C盘 ：）

就算是下载超时，本地文件也会创建.gradle/wrapper/dists/gradle-{版本号}-all/{随机字符串}这个目录的。

此时再Build就可以了，接下来就是大量时间去下载其他依赖…

至此Gradle下载问题解决。

不出意外的话接下来你还会遇到这个问题：

Multiple build operations failed.
Could not create task ':flutter_plugin_android_lifecycle:generateDebugUnitTestConfig'.
Could not create task ':image_picker_android:generateDebugUnitTestConfig'.
Could not create task ':path_provider_android:generateDebugUnitTestConfig'.
Could not create task ':shared_preferences_android:generateDebugUnitTestConfig'.
Could not create task ':video_player_android:generateDebugUnitTestConfig'.
Could not create task ':wakelock_plus:generateDebugUnitTestConfig'.
Could not create task ':flutter_plugin_android_lifecycle:generateDebugUnitTestConfig'.
this and base files have different roots: D:\resource\td_ecology_v1\build\flutter_plugin_android_lifecycle and C:\Users\xx\AppData\Local\Pub\Cache\hosted\pub.flutter-io.cn\flutter_plugin_android_lifecycle-2.0.17\android.

不要慌，解决方法如下：

在文件[flutter项目]\android\build.gradle中，注释掉一行代码就行。

rootProject.buildDir = '../build'
subprojects {
    //project.buildDir = "${rootProject.buildDir}/${project.name}" // 把这行注释掉，在flutter运行的时候，记得取消这行的注释
}
subprojects {
    project.evaluationDependsOn(':app')
}

tasks.register("clean", Delete) {
    delete rootProject.buildDir
}

注释后再Build就可以构建完成了，记得在Flutter运行的时候，记得取消这行的注释哦，不然会报下面错误：

Exception: Gradle build failed to produce an .apk file. It's likely that this file was generated under D:\resource\xxx\build, but the tool couldn't find it.

原生代码编写

核心代码传到了CSDN资源里面，自行下载，不要积分：core文件夹

里面的xml文件要放到 android\app\src\main\res\raw文件夹下奥。

目录如下图所示：

在这里插入图片描述

接下来就是在MainActivity中加入下面代码：

class MainActivity: FlutterActivity() {


    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        GeneratedPluginRegistrant.registerWith(flutterEngine)
        flutterEngine.plugins.add(mutableSetOf<FlutterPlugin>(ChinaProvinceViewFlutterPlugin()))

    }

}

然后返回你的Flutter工程添加下面两个文件：

china_province_view.dart

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

const _ChinaProvinceView_TAG =
    'com.mrper.coronavirus.widgets.china-province-view';

///中国行政区域地图控件
class ChinaProvinceView extends StatefulWidget {

  ChinaProvinceView({
    required this.width,
    required this.onViewCreated,
  })  : assert(width != null && width > 0, '地图宽度必须大于0');

  /// 地图宽度
  final double width;
  /// 视图创建完成的事件
  final Function(int id) onViewCreated;

  @override
  _ChinaProvinceViewState createState() => _ChinaProvinceViewState();
}

class _ChinaProvinceViewState extends State<ChinaProvinceView> {
  /// 地图的宽高比例
  final double _mapWHRatio = 1369.0 / 1141.0;

  @override
  Widget build(BuildContext context) => SizedBox(
      width: widget.width,
      height: widget.width / _mapWHRatio,
      child: AndroidView(
          viewType: _ChinaProvinceView_TAG,
          creationParamsCodec: StandardMessageCodec(),
          onPlatformViewCreated: widget.onViewCreated));
}

class ChinaProvinceViewController {
  late MethodChannel? _methodChannel;
  late EventChannel? _eventChannel;

  ChinaProvinceViewController(int viewId) {
    _methodChannel = MethodChannel('$_ChinaProvinceView_TAG-$viewId');
    _eventChannel = EventChannel('$_ChinaProvinceView_TAG-$viewId-event');
  }

  /// 设置选中的背景色
  set selectedBackgroundColor(int value) => _methodChannel?.invokeMethod(
      'setSelectedBackgroundColor', {'value': value ?? Colors.red.value});

  

  void dispose() {
    if (_methodChannel != null) {
      _methodChannel?.setMethodCallHandler(null);
      _methodChannel = null;
    }
    if (_eventChannel != null) {
      _eventChannel = null;
    }
  }
}

map_page.dart


import 'package:ecology/component/app_bar.dart';
import 'package:flutter/material.dart';

import 'china_province_view.dart';

class MapPage extends StatefulWidget {

  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  late ChinaProvinceViewController _chinaProvinceViewController;

  void _onChinaProvinceViewCreated(int viewId) {
    _chinaProvinceViewController = ChinaProvinceViewController(viewId)
      ..selectedBackgroundColor = Colors.blue.value;
  }

  @override
  Widget build(BuildContext context) => Container(
    child: SingleChildScrollView(
        child: Column(children: [_buildChinaMapView()])),
  );

  Widget _buildChinaMapView() {
    return Container(
        margin: const EdgeInsets.all(5),
        child: ChinaProvinceView(
            width: MediaQuery.of(context).size.width - 10,
            onViewCreated: _onChinaProvinceViewCreated));
  }

  @override
  void dispose() {
    _chinaProvinceViewController?.dispose();
    super.dispose();
  }
}

MapPage 就是地图界面了。

打完收工，又是加班的一天 ┭┮﹏┭┮

该篇文章代码参考自gitee上一个大佬的项目：https://gitee.com/yugecse/coronavirus

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1409574.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue项目中debugger不生效问题解决

vue项目中debugger不生效问题解决

Vue中使用debugger在chrome谷歌浏览器中失效问题&#xff08;已解决&#xff09;_vue debugger不生效-CSDN博客 卡了半天,最后解决了
阅读更多...
Python中安全删除列表元素的实用技巧详解

Python中安全删除列表元素的实用技巧详解

概要 在 Python 中&#xff0c;列表是一种常用的数据结构&#xff0c;用于存储一组有序的元素。然而&#xff0c;有时候需要从列表中删除特定的元素&#xff0c;以满足需求。本文将介绍一些安全删除列表元素的实用技巧&#xff0c;以及如何处理各种情况下可能出现的异常。 使用…
阅读更多...
​第20课 在Android Native开发中加入新的C++类

​第20课 在Android Native开发中加入新的C++类

​这节课我们开始利用ffmpeg和opencv在Android环境下来实现一个rtmp播放器&#xff0c;与第2课在PC端实现播放器的思路类似&#xff0c;只不过在处理音视频显示和播放的细节略有不同。 1.压缩备份上节课工程文件夹并修改工程文件夹为demo20&#xff0c;将demo20导入到Eclipse或…
阅读更多...
代码随想录算法训练营29期|day30 任务以及具体安排

代码随想录算法训练营29期|day30 任务以及具体安排

332.重新安排行程 class Solution {private LinkedList<String> res;private LinkedList<String> path new LinkedList<>();public List<String> findItinerary(List<List<String>> tickets) {Collections.sort(tickets, (a, b) -> a.…
阅读更多...
Spring基于dynamic-datasource实现MySQL多数据源

Spring基于dynamic-datasource实现MySQL多数据源

目录 多数据源实现 引入依赖 yml配置文件 业务代码 案例演示 多数据源实现 引入依赖 <dependency><groupId>com.baomidou</groupId><artifactId>dynamicdatasourcespringbootstarter</artifactId><version>3.5.0</version> &…
阅读更多...
Java玩转《啊哈算法》排序之桶排序

Java玩转《啊哈算法》排序之桶排序

过去心不可得&#xff0c;现在心不可得&#xff0c;未来心不可得 目录在这里 楔子代码地址桶排序代码核心部分优缺点 完整代码演示 升级版核心代码完整代码演示 楔子 大家好&#xff01;本人最近看了下《啊哈算法》&#xff0c;写的确实不错&#xff0c;生动形象又有趣&#x…
阅读更多...
AR 自回归模型

AR 自回归模型

文章目录 总的代码ADF 检验（是否平稳）差分操作拟合AR 模型预测可视化总的代码 import pandas as pd import numpy as np import matplotlib.pyplot as plt from statsmodels.tsa.ar_model import AutoReg from statsmodels.tsa.stattools import adfuller# 生成一个示例时间序…
阅读更多...
【开源】基于JAVA语言的假日旅社管理系统

【开源】基于JAVA语言的假日旅社管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统介绍2.2 QA 问答 三、系统展示四、核心代码4.1 查询民宿4.2 新增民宿评论4.3 查询民宿新闻4.4 新建民宿预订单4.5 查询我的民宿预订单 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的假日旅社…
阅读更多...
Java-HashMap如何找落点

Java-HashMap如何找落点

顾名思义&#xff0c;HashMap采用的是哈希方式来找落点&#xff0c;通过数据的某些特征&#xff0c;计算出一个哈希值&#xff0c;然后用哈希值与节点建立映射关系&#xff0c;从而确定这个数据应该在哪个节点上&#xff0c;下图是一个具有16个节点的分布式集群&#xff0c;本文…
阅读更多...
JVM篇--垃圾回收器高频面试题

JVM篇--垃圾回收器高频面试题

1 你知道哪几种垃圾收集器&#xff0c;各自的优缺点是啥&#xff0c;重点讲下cms和G1&#xff0c;包括原理&#xff0c;流程&#xff0c;优缺点&#xff1f; 1&#xff09;首先简单介绍下 有以下这些垃圾回收器 Serial收集器&#xff1a; 单线程的收集器&#xff0c;收集垃圾时…
阅读更多...
【K8S 云原生】K8S的图形化工具——Rancher

【K8S 云原生】K8S的图形化工具——Rancher

目录 一、rancher概述 1、rancher概念 2、rancher和K8S的区别&#xff1a; 二、实验 1、安装部署 2、给集群添加监控&#xff1a; 3、创建命名空间&#xff1a; 4、创建deployment&#xff1a; 5、创建service&#xff1a; 6、创建ingress&#xff1a; 7、创建hpa 8…
阅读更多...
redis—Set集合

redis—Set集合

目录 前言 1.常见命令 2.使用场景 前言 集合类型也是保存多个字符串类型的元素的&#xff0c;但和列表类型不同的是&#xff0c;集合中1)元素之间是无序的2)元素不允许重复&#xff0c;如图2-24所示。一个集合中最多可以存储22 - 1个元素。Redis 除了支持集合内的增删查改操…
阅读更多...
Android SeekBar 进度条圆角

Android SeekBar 进度条圆角

先看下效果图&#xff1a; 之前&#xff1a; 优化后&#xff1a; 之前的不是圆角是clip切割导致的 全代码&#xff1a; <SeekBarandroid:layout_width"188dp"android:layout_height"wrap_content"android:background"null"android:focusa…
阅读更多...
微认证 openEuler社区开源贡献实践

微认证 openEuler社区开源贡献实践

文章目录 1. 开源与开源社区2. openEuler 社区概述3.参与openEuler社区贡献4.openEuler软件包开发Linux软件管理——源码编译 1. 开源与开源社区 Richard Matthew Stallman&#xff0c;1983年9月推出GNU项目&#xff0c;并发起自由软件运动(free software movement或free/open…
阅读更多...
【并发】什么是 Future？

【并发】什么是 Future？

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 关键特性和操作包括&#xff1a; 提交任务&#xff1a; 查询完成状态&#xff1a; 等待结果&#xff1a; 取消任务&#xff1a…
阅读更多...
Vue实现图片预览，侧边栏懒加载，不用任何插件，简单好用

Vue实现图片预览，侧边栏懒加载，不用任何插件，简单好用

实现样式 需求 实现PDF上传预览&#xff0c;并且不能下载 第一次实现&#xff1a;用vue-pdf&#xff0c;将上传的文件用base64传给前端展示 问题&#xff1a; 水印第一次加载有后面又没有了。当上传大的pdf文件后&#xff0c;前端获取和渲染又长又慢&#xff0c;甚至不能用 修…
阅读更多...
Windows下网络编程(win32API+VS2022)

Windows下网络编程(win32API+VS2022)

一、开发环境 我这里介绍下我用的环境安装过程。 所有版本的VS都可以的。 我当前环境是在Windows下&#xff0c;IDE用的是地表最强IDE VS2022。 下载地址&#xff1a;https://visualstudio.microsoft.com/zh-hans/downloads/ 因为我这里只需要用到C和C语言编程&#xff0c;那…
阅读更多...
SRC实战 | 小白SRC找到的第一个SQL注入

SRC实战 | 小白SRC找到的第一个SQL注入

本文由掌控安全学院 - zbs投稿 一、漏洞说明 xxxxx公司后台存在SQL注入&#xff0c;后端数据库为Mysql 【显错位2&#xff0c;4&#xff0c;6】 漏洞已提交平台&#xff0c;后台的开发商提供给了很多公司&#xff0c;搜一下资产就有很多公司都没有修复该漏洞。 二、漏洞挖掘…
阅读更多...
Java Web(四）--JavaScript

Java Web(四）--JavaScript

介绍 JavaScript 教程 JavaScript 能改变 HTML 内容&#xff0c;能改变 HTML 属性&#xff0c;能改变 HTML 样式 (CSS)&#xff0c;能完成页面的数据验证&#xff1b; JS 需要运行浏览器来解析执行JavaScript 代码&#xff1b; JS 是 Netscape 网景公司的产品&#xf…
阅读更多...
Git搭建

Git搭建

文件格式 <VirtuaHost * 80> nginx </virtualHost> pache xml server {} nginx conf格式 [xx] 配置内容 代码开发中版本控制,项目代码编译构建,项目版本迭代全流程 命令300条 Hospital Information System 开发语言分类: 编译型: C nginx ma…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023