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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

分类预测 | Matlab实现GRU-Attention-Adaboost基于门控循环单元融合注意力机制的Adaboost数据分类预测/故障识别

分类预测 | Matlab实现GRU-Attention-Adaboost基于门控循环单元融合注意力机制的Adaboost数据分类预测/故障识别 目录 分类预测 | Matlab实现GRU-Attention-Adaboost基于门控循环单元融合注意力机制的Adaboost数据分类预测/故障识别分类效果基本描述程序设计参考资料 分类效果 …

【Linux C | 进程】Linux 进程间通信的10种方式(2)

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

手写一个图形验证码

文章目录 需求分析 需求 使用 JS 写一个验证码&#xff0c;并在前端进行校验 分析 新建文件 VueImageVerify.vue <template><div class"img-verify"><canvas ref"verify" :width"state.width" :height"state.height&qu…

OpenCV-Python(51):基于Haar特征分类器的面部检测

目标 学习了解Haar 特征分类器为基础的面部检测技术将面部检测扩展到眼部检测等。 基础 以Haar 特征分类器为基础的对象检测技术是一种非常有效的对象检测技术(2001 年Paul_Viola 和Michael_Jones 提出)。它是基于机器学习的,通过使用大量的正负样本图像训练得到一个cascade_…

socket以及字节序

1. socket 介绍&#xff1a; 简介&#xff1a; 所谓 socket&#xff08; 套接字&#xff09;&#xff0c;就是对网络中不同主机上的应用进程之间进行双向通信的 端点的抽象。 一个套接字就是网络上进程通信的一端&#xff0c;提供了应用层进程利用网络协议交换数据的机制。从所…

推荐一个还可以的windows ssh工具

1.下载 https://github.com/kingToolbox/WindTerm/releases 2.解压 3.使用 上传 下载都很快 比cmd窗口好用 当然和finalshell有点像

Linux编辑器vim(含vim的配置)

文章目录 前言vim的基本概念vim基本操作进入vim模式切换退出vim vim指令vim命令模式指令vim底行模式命令 简单vim配置 前言 本篇文章&#xff0c;小编将介绍Linux编辑器–>vim以及vim的配置。 vim的基本概念 正常/普通/命令模式(Normal mode) 控制屏幕光标的移动&#xf…

云贝教育 |【分享课】1月25日Oracle分享主题:Oracle 单实例DG

分享主题&#xff1a;Oracle 19c 单实例DG-1 讲师&#xff1a;刘峰 直播时间&#xff1a;1月25日周四19:30 直播平台&#xff1a;微信视频号 云贝学院

(更新)“高铁开通”地级市-多期DID工具变量(2000-2022年)

参照卞元超&#xff08;2019&#xff09;、邓慧慧&#xff08;2020&#xff09;、汪克亮&#xff08;2021&#xff09;等人做法&#xff0c;将开通高铁的城市作为处理组&#xff0c;未开通高铁的城市作为对照组。地级市开通高铁之后的DID赋值为1&#xff0c;未开通则赋值为0 一…

云计算中的出口数据是指什么?

谷歌云&#xff08;Google Cloud&#xff09;近日宣布了一项重大政策变动&#xff0c;决定免除那些选择终止使用其服务并将数据迁移到其他云服务商或本地环境的客户的出口数据费用&#xff08;数据导出费用&#xff09;。 这一举措由谷歌云平台负责人阿米特扎维里&#xff08;A…

docker 基础手册

文章目录 docker 基础手册docker 容器技术镜像与容器容器与虚拟机docker 引擎docker 架构docker 底层技术docker 二进制安装docker 镜像加速docker 相关链接docker 生态 docker 基础手册 docker 容器技术 开源的容器项目&#xff0c;使用 Go 语言开发原意“码头工人”&#x…

SpringBoot责任链与自定义注解:优雅解耦复杂业务

引言 责任链模式是一种行为设计模式&#xff0c;它允许你将请求沿着处理者链进行传递&#xff0c;直到有一个处理者处理请求。在实际应用中&#xff0c;责任链模式常用于解耦发送者和接收者&#xff0c;使得请求可以按照一定的规则被多个处理者依次处理。 首先&#xff0c;本…

【LeetCode】104. 二叉树的最大深度(简单)——代码随想录算法训练营Day16

题目链接&#xff1a;104. 二叉树的最大深度 题目描述 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例…

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

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

垃圾回收小程序:环保与便捷的完美结合

一、引言 随着科技的发展&#xff0c;移动应用程序已经成为人们日常生活中不可或缺的一部分。其中&#xff0c;废品回收小程序以其独特的价值和功能&#xff0c;日益受到人们的关注和青睐。本文将探讨废品回收小程序开发的重要性、功能特点、技术实现和未来发展趋势。 二、废…

AOP切面

什么是Spring的AOP AOP在spring中又叫“面向切面编程”&#xff0c;它可以说是对传统我们面向对象编程的一个补充&#xff0c;从字面上顾名思义就可以知道&#xff0c;它的主要操作对象就是“切面”&#xff0c;所以我们就可以简单的理解它是贯穿于方法之中&#xff0c;在方法…

springboot家乡特色推荐系统源码和论文

在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括家乡特色推荐的网络应用&#xff0c;在外国家乡特色推荐系统已经是很普遍的方式&#xff0c;不过国内的管理网站可能还处于起步阶段。家乡特色推荐系统采用java技术&#xff0…

E3 基于Mysql的SQL应用和存储过程

一、实验目的: Mysql平台要求你熟练使用MySQL基本指令&#xff0c;完成对程序的控制与管理&#xff0c;并根据要求写存储过程。 二、实验要求: 1、基本硬件配置:英特尔Pentium III 以上,大于4G内存&#xff1b; 2、软件要求:Mysql&#xff1b; 3、时间:1小时&#xff1b; …

ggplot2 -- x轴相关操作

文章目录 刻度标签倾斜替换x轴刻度标签改变X刻度标签大小及颜色 演示数据集 library(ggplot2)# 示例数据 data <- data.frame(x 1:5,y c(3, 5, 2, 7, 4) ) data # x y #1 1 3 #2 2 5 #3 3 2 #4 4 7 #5 5 4刻度标签倾斜 p1 <- ggplot(data, aes(x x, y y)) geom_bar…

产品解读 | 新一代湖仓集存储,多模型统一架构,高效挖掘数据价值

星环科技TDH一直致力于给用户带来高性能、高可靠的一站式大数据基础平台&#xff0c;满足对海量数据的存储和复杂业务的处理需求。 同时在易用性方面持续深耕&#xff0c;降低用户开发和运维成本&#xff0c;让数据处理平民化&#xff0c;助力用户以更便捷、高效的方式去挖掘数…