Flutter中实现中国省份地图

效果展示(这里只展示局部,完全展示违规):

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

在这里插入图片描述

注:非完整中国地图!!!

本文用于记录在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;_ChinaProvinceViewState createState() => _ChinaProvinceViewState();
}class _ChinaProvinceViewState extends State<ChinaProvinceView> {/// 地图的宽高比例final double _mapWHRatio = 1369.0 / 1141.0;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 {_MapPageState createState() => _MapPageState();
}class _MapPageState extends State<MapPage> {late ChinaProvinceViewController _chinaProvinceViewController;void _onChinaProvinceViewCreated(int viewId) {_chinaProvinceViewController = ChinaProvinceViewController(viewId)..selectedBackgroundColor = Colors.blue.value;}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));}void dispose() {_chinaProvinceViewController?.dispose();super.dispose();}
}

MapPage 就是地图界面了。

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


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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微软 AD 介绍 | 安全建议 | 防护

介绍&#xff1a; 什么是Active Directory&#xff08;AD&#xff09;&#xff1f; Active Directory 是由 微软开发的目录服务&#xff0c;用于存储和管理网络中的资源&#xff0c;如计算机、用户、组和其他网络对象。允许组织管理员轻松地管理和验证网络中的用户和计算机。 …

【C++】stack、queue的使用及模拟实现

目录 一、stack1.1 stack的使用1.2 stack的模拟实现 二、queue2.1 queue的使用2.2 queue的模拟实现 一、stack 1.1 stack的使用 stack是一种容器适配器&#xff0c;它的特点是后进先出&#xff0c;只能在容器的一端进行插入和删除操作。 stack的使用很简单&#xff0c;主要有…

openssl3.2/test/certs - 040 - EC cert with named curve signed by named curve ca

文章目录 openssl3.2/test/certs - 040 - EC cert with named curve signed by named curve ca概述笔记END openssl3.2/test/certs - 040 - EC cert with named curve signed by named curve ca 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 /*! * \file D:\my_dev…

数列分段 Section II

题目描述 给定一个长度为N的正整数数列 A 1 ∼ N A_{1\sim N} A1∼N​&#xff0c;现要将其分成M&#xff08; M ≤ N M\leq N M≤N&#xff09;段&#xff0c;并要求每段连续&#xff0c;且每段和的最大值最小。最大值最小的定义如下&#xff1a;例如一个数列 4 2 4 5 1 4\…

【知识---GitHub不允许上传大于100M文件该如何解决】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言步骤 1: 安装 Git LFS步骤 2: 在 Git 项目中启用 LFS步骤 3: 创建并编辑 .gitattributes 文件步骤 4: 提交并推送到远程仓库步骤 5: 将大文件添加到仓库步骤 6:…

卫星影像离线瓦片如何调用?

我们曾为你分享了按区县购买卫星影像并在线调用的方法。 于是就有朋友问&#xff0c;卫星影像瓦片可以离线调用吗&#xff1f; 当然可以&#xff0c;这里就来分享一下卫星影像瓦片离线调用的方法。 卫星影像离线瓦片如何调用&#xff1f; 这里以OpenLayers、Mapbox和Cesiu…

java实现ftp协议远程网络下载文件

引言 在开发过程中&#xff0c;偶尔会遇到网络文件在FTP服务上存储着&#xff0c;对于这种情况想要下载到本地还有些麻烦&#xff0c;我们直接上世界上最简单的代码。 How to do 1.提前引入包 <!--hutool万能工具包--><dependency><groupId>cn.hutool<…

安卓移动设备使用DS file文件管理工具远程访问本地群晖NAS文件

文章目录 1. 群晖安装Cpolar2. 创建TCP公网地址3. 远程访问群晖文件4. 固定TCP公网地址5. 固定TCP地址连接6. 结语 DS file 是一个由群晖公司开发的文件管理应用程序&#xff0c;主要用于浏览、访问和管理存储在群晖NAS&#xff08;网络附加存储&#xff09;中的文件。这个应用…

搭建nodejs服务器

简单搭建nodejs服务器&#xff0c;用于爬虫js逆向. 1、安装镜像源 下载nrm npm install -g nrm 设置下载源&#xff1a;&#xff08;最好使用npm源或者淘宝源&#xff09; 例子&#xff1a;npm config set registry http://registry.npmjs.org 查看是否设置成功&#xff1a…

JVM内存模型解析

JVM内存模型解析 1. 引言 1.1 背景介绍 Java Virtual Machine&#xff08;JVM&#xff09;作为Java程序的运行环境&#xff0c;扮演着关键的角色。它不仅负责解释和执行Java字节码&#xff0c;还通过其独特的内存模型管理着程序运行过程中所需的各种资源。理解JVM内存模型是…

Mac 也能玩文明6!下载安装详细教程

最近朋友给我分享了一个 Mac 玩文明6的方法&#xff0c;丝毫不卡顿&#xff0c;非常流畅&#xff0c;分享给大家 文明6是最新的文明系列游戏&#xff0c;和以往的文明游戏一样&#xff0c;玩家将从石器时代创建文明&#xff0c;然后迈向信息时代&#xff0c;最终通过军事、经济…

openssl3.2/test/certs - 041 - 1024-bit leaf key

文章目录 openssl3.2/test/certs - 041 - 1024-bit leaf key概述笔记END openssl3.2/test/certs - 041 - 1024-bit leaf key 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 /*! * \file D:\my_dev\my_local_git_prj\study\openSSL\test_certs\041\my_openssl_linux_…

netty的常用类以及执行流程

总体概述 类关系 给ServerBootstrap配置两个EventLoopGroup&#xff0c;一个建立连接&#xff0c;一个处理网络io。 EventLoopGroup给EventLoop分配线程。 在 Netty 中&#xff0c;EventLoop 通过不断轮询 Selector 来检测 Channel 上发生的事件&#xff0c;当 Channel 上的事…

考研C语言刷题基础篇之数组(一)

目录 第一题&#xff1a;用数组作为参数实现冒泡排序 不用函数的冒泡排序 冒泡排序原理&#xff1a; 错误的数值传参冒泡排序 错误的原因 就是什么是数组名 正确的数组传参的冒泡排序 数组的地址和数组首元素的地址的区别 第一题&#xff1a;用数组作为参数实现冒泡排…

npm ERR! code CERT_HAS_EXPIRED errno CERT_HAS_EXPIRED

npm ERR! code CERT_HAS_EXPIRED 和 npm ERR! errno CERT_HAS_EXPIRED 都是指npm 在尝试连接到 npm 仓库时遇到了 SSL 证书过期的问题。这可能是由于您使用的 npm 仓库的证书已过期&#xff0c;或者您的系统时间不正确。 解决此问题的方法如下 1.关闭 npm 的 SSL 验证 通常在…

Docker网络配置与自定义IP容器通信

目录 前言 一、docker网络配置 1. bridge 虚拟网桥 2. host 网络模式 3. none 网络模式 4. 自定义container网络模式 二、自定义IP容器通信 1. 自定义IP 2. 创建所需容器&#xff08;mysql&#xff0c;tomcat&#xff09; 3. 准备项目资源 4. 构建Nginx实现负载均衡…

this指向问题以及修改函数的this指向方法

1、什么是this this表示对象 取决于函数调用&#xff08;this表示对象>当前对象>当前环境对象>函数运行时环境对象&#xff09; this就是函数运行时所在的环境对象&#xff08;取决于函数调用>不同场合&#xff0c;this有不同的值&#xff09; 函数的不同使用场…

rsync命令常用参数详解

1、语法 Usage: rsync [OPTION]… SRC [SRC]… DEST or rsync [OPTION]… SRC [SRC]… [USER]HOST:DEST or rsync [OPTION]… SRC [SRC]… [USER]HOST::DEST or rsync [OPTION]… SRC [SRC]… rsync://[USER]HOST[:PORT]/DEST or rsync [OPTION]… [USER]HOST:SRC [DEST] or r…

PyTorch深度学习实战(32)——DCGAN详解与实现

PyTorch深度学习实战&#xff08;32&#xff09;——DCGAN详解与实现 0. 前言1. 模型与数据集分析1.1 模型分析1.2 数据集介绍 2. 构建 DCGAN 生成人脸图像小结系列链接 0. 前言 DCGAN (Deep Convolutional Generative Adversarial Networks) 是基于生成对抗网络 (Convolution…

el-form动态检验无法生效问题

<el-form-item label"状态&#xff1a;"prop"zt"class"bitianxian"><el-select v-model"ruleForm.zt"placeholder"请选择"change"emptyztXM()"><el-option v-for"(item,index) in ZTdata&quo…