跨平台移动开发

（一）一统江湖Flutter-环境搭建

2018-12-19  本文已影响212人  努力努力再努力_y

一、认识一下Flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

主流框架的对比

Cordova：个人认为Flutter可以完胜了，因为Cordova还是基于网页技术进行包装，利用插件的形式开发移动应用的，就这一点。无论是性能还是体验，Flutter都可以完胜了。

RN（React Native）：RN的效率由于是将View编译成了原生View,所以效率上要比基于Cordova的HTML5高很多,但是它也有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加.比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.想想此时如果我们的list再需要滑动刷新,会有多少个对象需要渲染.所以也就有了前面所说的RN的列表方案不友好。

Flutter：吸收了前两者的教训之后,在渲染技术上,选择了自己实现(GDI),由于有更好的可控性,使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题,所以在性能方面比RN更高一筹;有经验的开发者可以打开Android手机开发者选项里面的显示边界布局,发现Flutter的布局是一个整体.说明Flutter的渲染没用使用原生控件进行渲染。

120fps超高性能

Flutter采用GPU渲染技术，所以性能极高。

Flutter编写的应用是可以达到120fps(每秒传输帧数),这也就是说，它完全可以胜任游戏的制作。而我们常说的RN的性能只能达到60fps，这也算是Flutter的一个超高竞争力吧。官方宣称Flutter甚至会超过原生性能。

如果你想迈入移动游戏领域，学习Flutter也是一个非常好的选择。
github地址

二、Flutter开发环境搭建Windows版

特别说明:如果你还不会翻墙，科学上网。那你先停止学习吧，因为你不可能安装成功，先去学学这些东西，能打开谷歌了，再返回来学效率更高。

  1. JDK下载及环境变量配置

  2. 下载安装 FlutterSDK

    • 解压
    • 配置环境变量至path，例（D:\developer\application\flutter\bin）
    • 终端输入flutter doctor查看详情

  3. Android Studio的安装

  4. 打开Android Stuido 软件，然后找到Plugin的配置，搜索Flutter插件。

  5. 安装Android证书(注意jdk版本问题)

三、Android studio新建Flutter项目



安装AVD虚拟机

  1. 现在需要一个虚拟机来运行我们的程序，可以点击Android Studio中的上方菜单tool -AVD Manager选项。

  2. 出现新建菜单，选择Create Virtual Device.....,如果你一个虚拟机也没建过，这个选项在对话框的中间（我一定跟我的图一样）。


  3. 选择虚拟机类型，这个你随意选就好，我选择的是Nexus 5x。（如果你屏幕小，就选择一个小屏幕的虚拟机）


  4. 选择系统，这里尽量选择最新的，我选择了Android 9.0系统，选择好后，又是一个漫长的等待过程。

  5. 安装好后，点击开始按钮，运行虚拟机了（第一次运行，需要安装系统，会慢一些），运行起来后，如下图。


  6. 让Flutter跑起来


四、Error runing Gradle 错误解决（1.x版本已经修复）

第一步：修改掉项目下的android目录下的build.gradle文件，把google() 和 jcenter()这两行去掉。改为阿里的链接。

buildscript {
    repositories {
        //  google()
        //  jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}
        }
        dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}
allprojects {
    repositories {
        // google()
        // jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
}
rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}
task clean(type: Delete) {
    delete rootProject.buildDir
}

第二步：修改Flutter SDK包下的flutter.gradle文件,这个目录要根据你的SDK存放的位置有所变化。比如我放在了D盘Flutter目录下，那路径就是这个。
D:\developer\application\flutter\packages\flutter_tools\gradle

buildscript {
    repositories {
        //jcenter()
        // maven {
        //     url 'https://dl.google.com/dl/android/maven2'
        // }
        maven{
            url 'https://maven.aliyun.com/repository/jcenter'
        }
        maven{
            url 'http://maven.aliyun.com/nexus/content/groups/public'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

然后再重新Debug一下，就基本可以启动起来。

还有一种错误是说硬件没有启动GPU，需要下载安装一个程序，这个提示的很清楚，不做过多的介绍了。

五、VSCode下如何玩转Flutter

我已经使用VSCode有几年了，记得是从刚出VSCode就开始使用了，我个人是不喜欢用Android Studio来进行开发的，感觉它太重量级了。所以必须想办法用VSCode进行开发。幸运的是VSCode已经有了Flutter插件，而且也非常完美。

  1. VSCode安装Flutter插件


  2. 启动虚拟机


  3. 启动 flutter run

  4. 热键（debug F5 模式实时加载）
    r 键：点击后热加载，也就算是重新加载吧。
    p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
    o 键：切换android和ios的预览模式。
    q 键：退出调试预览模式。

注原文：http://jspang.com/post/flutter1.html
上一篇下一篇

猜你喜欢

热点阅读