Google 跨平台方案 Flutter 从入门到实战

时间  2019-11-06
标签 google 跨平台 方案 flutter 入门 实战 栏目 Google 繁體版
原文   原文链接

本文由 玉刚说写做平台 提供写做赞助java

原做者：杨哲git

版权声明：本文版权归微信公众号 玉刚说 全部，未经许可，不得以任何形式转载github

前言

2018年2月27日，在2018世界移动大会上，Google发布了Flutter的第一个Beta版本。Flutter是Google用以帮助开发者在 Android/IOS 两个平台开发高质量原生应用的全新移动UI框架。编程

  1. 热重载（Hot Reload），做为一个安卓开发者，能热重载真的太舒服了，利用Android Studio直接一个ctrl+s就能够保存并重载，模拟器立马就能够看见效果。
  2. 一切皆为Widget的理念，对于Flutter来讲，手机应用里的全部东西都是Widget，经过可组合的空间集合、丰富的动画库以及分层课扩展的架构实现了富有感染力的灵活界面设计。
  3. 借助可移植的GPU加速的渲染引擎以及高性能本地代码运行时以达到跨平台设备的高质量用户体验。

这段介绍是直接抄下来的，虽然我并不知道什么叫可移植的GPU加速的渲染引擎，可是最终结果就是利用Flutter构建的应用在运行效率上会和原生应用差很少,那么咱们开始走进 Flutter 的世界吧。swift

本文章的结构以下：api

  • 如何搭建 Flutter 开发环境
  • Dart的优势和基本用法
  • 如何使用平台特性API
  • 除去UI部分，代码如何在 Android/IOS 复用
  • 实现一个案例

Flutter进行开发 Android/IOS

tips： 本文在苹果笔记上开发，由于须要调试 IOS 和 Android数组

这里我用 Android Studio 开发 Flutter ,下边咱们来看一下开发步骤。安全

准备工做

  1. 安装Android Studio 中 Flutter 和 Dart 两个插件（设置中Plugin搜索便可）
  2. 官网下载 fluter sdk（tip： 国内下载地址）
  3. 建立工程
  4. 安装Xcode ，启动一个IOS 模拟器
  5. 启动一个 Android 模拟器

我这里也是大概描述一下大概流程，为了节省篇幅，官网有更加详细的步骤：bash

我首先推荐官网： Flutter 官网 若是你想快速入门，这里有 中文官网微信

Dart 语法

Dart 的优点

当时我学习 Dart 语言的时候，一直思考 Dart 有什么优点？只有 Google 这个亲爹的缘由吗？我带着这个思考查了很多资料，发现 Dart 的优点有以下几点：

  • Dart 支持AOT编译和JIT编译两种方式
  • Dart 是单线程的，这意味着它根本不容许抢占

JIT编译

JIT编译在开发过程当中使用，编译器速度特别快。而后，当一个应用程序准备发布时，它被AOT编译。所以，借助先进的工具和编译器，Dart具备一箭双鵰的优点：极快的开发周期、快速的执行速度和极短启动时间。

咱们讨论过一个有助于保持顺畅的特性，那就是Dart能AOT编译为本地机器码。预编译的AOT代码比JIT更具可预测性，由于在运行时不须要暂停执行JIT分析或编译。

AOT编译

然而，AOT编译代码还有一个更大的优点，那就是避免了“JavaScript桥梁”。当动态语言（如JavaScript）须要与平台上的本地代码互操做时，它们必须经过桥进行通讯，这会致使上下文切换，从而必须保存特别多的状态（可能会存储到辅助存储）。这些上下文切换具备双重打击，由于它们不只会减慢速度，还会致使严重的卡顿。

Dart 的 基本语法

若是你有 java 语言的基础，发现dart里边的 API 几乎 90% 以上相同, 几乎很快能上手，这里我就特别指出他们的不一样点。这里我想最快的入门方法，应该是查看官网的 quick start, 快速正版放心，并且不会过期，一直在更新。 这里我简单的介绍一下：

  • Hello World
  • 变量的声明
  • 方法的定义
  • 基本类型
  • 条件判断
  • 循环语句

因为篇幅有限，我这里列举一下我认为特别的地方，剩下的能够仔细阅读 官方文档。

Hello World

咱们万年老套路 Hello World，熟悉他语言的运行机制。

// 定义一个函数
        printNumber(num aNumber) {
          print('The number is $aNumber.'); //控制台打印
        }

        // 启动方法，相似于 java 的main函数
        main() {
          var number = 42; 
          printNumber(number); 
        }
复制代码

咱们能够以看到一下几点：

  • 能赋值给变量的因此东西都是对象，包括 numbers, null, function, 都是继承自 Object 内置类
  • 尽可能给变量定义一个类型，会更安全，没有显示定义类型的变量在 debug 模式下会类型会是 dynamic（动态的）
  • dart 在 running 以前解析你的全部代码，指定数据类型和编译时的常量，能够提升运行速度
  • dart 提供了顶级函数(如：main())
  • dart 没有 public、private、protected 这些关键字，变量名以"_"开头意味着对它的 lib 是私有的

变量声明

没有初始化的变量都会被赋予默认值 null

var name = 'Bob';
var unInitializeValue1;   //未给初值的变量，默认值为 null
Int unInitializeValue2;   //即便是Int 型，默认值也是 null

//相似于 Kotlin, 能够推导出 name 为字符串类型
var name = 'Bob';
// 若是不想 推导出类型，下边两种写法
dynamic name = 'Bob';
Object name = 'Bob';
复制代码

程序中只当数据类型是为了指出本身的使用意图，并帮助语言进行语法检查。可是，指定类型不是必须的,相似于Kotlin 会进行类型推导。

基本类型

number 取值范围：-2^53 to 2^53

// String -> int
var one = int.parse('1');

// String -> double
var onePointOne = double.parse('1.1');

// int -> String
String oneAsString = 1.toString();

// double -> String 注意括号中要有小数点位数，不然报错
String piAsString = 3.14159.toStringAsFixed(2);
复制代码

string

  • '''...'''，"""..."""表示多行字符串
  • r'...',r"..."表示“raw”字符串
  • 用 或{} 来计算字符串中变量的值

示例代码:

var s = 'Android Developer';

  print ('A Commpany has a $s, which is good idea.' ==
      'A Commpany has a Android Developer,' +
          ' which is good idea.');
  print('I am a ' +
      '${s.toUpperCase()} is very hornor!' ==
      'I am a ' +
          'ANDROID DEVELOPER is very hornor!');
复制代码

bool 布尔类型

Dart 是强 bool 类型检查，只有bool 类型的值是true 才被认为是true

list 列表

var vegetables = new List();

// 或者简单的用List来赋值
var fruits = ['apples', 'oranges'];

// 添加元素
fruits.add('kiwis');

// 添加多个元素
fruits.addAll(['grapes', 'bananas']);

// 获取第一个元素
fruits.first;

// 获取元素最后一个元素
fruits.last;

// 查找某个元素的索引号
assert(fruits.indexOf('apples') == 0);

// 删除指定位置的元素，返回删除的元素
fruits.removeAt(index);

// 删除指定元素,成功返回true，失败返回false
fruits.remove('apples');

// 删除最后一个元素，返回删除的元素
fruits.removeLast();

// 删除指定范围元素，含头不含尾，成功返回null
fruits.removeRange(start,end);

// 删除指定条件的元素，成功返回null
fruits.removeWhere((item) => item.length >6)；

// 删除全部的元素
fruits.clear();

// sort()对元素进行排序，传入一个函数做为参数，return <0表示由小到大， >0表示由大到小
fruits.sort((a, b) => a.compareTo(b));
复制代码

map 散列表

// Map的声明
var hawaiianBeaches = {
    'oahu' : ['waikiki', 'kailua', 'waimanalo'],
    'big island' : ['wailea bay', 'pololu beach'],
    'kauai' : ['hanalei', 'poipu']
};
var searchTerms = new Map();

// 指定键值对的参数类型
var nobleGases = new Map<int, String>();

// Map的赋值，中括号中是Key，这里可不是数组
nobleGase[54] = 'dart';

//Map中的键值对是惟一的
//同Set不一样，第二次输入的Key若是存在，Value会覆盖以前的数据
nobleGases[54] = 'xenon';
assert(nobleGases[54] == 'xenon');

// 检索Map是否含有某Key
assert(nobleGases.containsKey(54));

//删除某个键值对
nobleGases.remove(54);
assert(!nobleGases.containsKey(54));
复制代码

条件判断和循环

  • if...else
  • for
  • while do-while
  • break continue
  • switch...case 若是 case 后面有表达式可是没有 break，会抛出异常
  • assert（仅在checked模式有效），若是条件为假，抛出异常

这里我介绍了一下基本语法，还有函数、异常、单线程的操做，因为篇幅有限，并且咱们也是一个入门教程，我这里就介绍到这里，若是想具体查看，能够点击我推荐的官网教程，用的 dart2 的方式。

Flutter如何使用Android和iOS的平台特性

Flutter使用了一个灵活的系统，容许您调用特定平台的API，不管在Android上的Java或Kotlin代码中，仍是iOS上的ObjectiveC或Swift代码中都可用。

Flutter平台特定的API支持不依赖于代码生成，而是依赖于灵活的消息传递的方式：

应用的Flutter部分经过平台通道（platform channel）将消息发送到其应用程序的所在的宿主（iOS或Android）。

宿主监听的平台通道，并接收该消息。而后它会调用特定于该平台的API（使用原生编程语言）并将响应发送回客户端，即应用程序的Flutter部分。

调用流程以下:

跨端调用流程

电池电量的 banerry

（1）建立一个新的应用程序项目

首先建立一个新的应用程序: 方式一： 在终端运行中：

flutter create batterylevel
复制代码

默认状况下，模板支持使用Java编写Android代码，或使用Objective-C编写iOS代码。要使用Kotlin或Swift，请使用-i和/或-a标志:

在终端中运行:

flutter create -i swift -a kotlin batterylevel
复制代码

方式二: 也能够经过项目new Flutter Project 来创造项目

（2） 建立Flutter平台客户端

该应用的State类拥有当前的应用状态。咱们须要延长这一点以保持当前的电量

首先，咱们构建通道。咱们使用MethodChannel调用一个方法来返回电池电量。

通道的客户端和宿主经过通道构造函数中传递的通道名称进行链接。单个应用中使用的全部通道名称必须是惟一的;

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  static const platform = const MethodChannel('samples.flutter.io/battery');

  // Get battery level.
}
复制代码

接下来，咱们调用通道上的方法，指定经过字符串标识符调用方法getBatteryLevel。 该调用可能失败。

例如，若是平台不支持平台API（例如在模拟器中运行时），因此咱们将invokeMethod调用包装在try-catch语句中。

咱们使用返回的结果，在setState中来更新用户界面状态batteryLevel。

// Get battery level.
  String _batteryLevel = 'Unknown battery level.';

  Future<Null> _getBatteryLevel() async {
    String batteryLevel;
    try {
      final int result = await platform.invokeMethod('getBatteryLevel');
      batteryLevel = 'Battery level at $result % .';
    } on PlatformException catch (e) {
      batteryLevel = "Failed to get battery level: '${e.message}'.";
    }

    setState(() {
      _batteryLevel = batteryLevel;
    });
  }
复制代码

最后，咱们在build建立包含一个小字体显示电池状态和一个用于刷新值的按钮的用户界面。

override
Widget build(BuildContext context) {
  return new Material(
    child: new Center(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          new RaisedButton(
            child: new Text('Get Battery Level'),
            onPressed: _getBatteryLevel,
          ),
          new Text(_batteryLevel),
        ],
      ),
    ),
  );
}
复制代码
（3） 在Android平台的代码实现

接下来，在 ManActivity 中 的 onCreate里建立MethodChannel并设置一个MethodCallHandler。确保使用与在Flutter客户端使用的通道名称相同。

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "samples.flutter.io/battery";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
                new MethodCallHandler() {
                    @Override
                    public void onMethodCall(MethodCall call, Result result) {
                        if (call.method.equals("getBatteryLevel")) {
                            int batteryLevel = getBatteryLevel();

                            if (batteryLevel != -1) {
                                result.success(batteryLevel);
                            } else {
                                result.error("UNAVAILABLE", "Battery level not available.", null);
                            }
                        } else {
                            result.notImplemented();
                        }
                    }
                });
    }

    private int getBatteryLevel() {
        int batteryLevel = -1;
        if (VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {
            BatteryManager batteryManager = (BatteryManager) getSystemService(BATTERY_SERVICE);
            batteryLevel = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY);
        } else {
            Intent intent = new ContextWrapper(getApplicationContext()).
                    registerReceiver(null, new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
            batteryLevel = (intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) * 100) /
                    intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);
        }

        return batteryLevel;
    }
}
复制代码

到此为止，咱们介绍完如何使用两个平台的特殊 API ,若是你在使用flutter 开发的时候，碰到官方没有支持的api，你能够本身去实现两个平台的代码，来实现你想要的效果。

除去UI部分，代码如何在 Android/IOS 复用

若是您但愿在多个Flutter应用程序中使用特定于平台的代码，将代码分离为位于主应用程序以外的目录中，作一个平台插件会颇有用。这样就能够把 UI 部分刨除掉，复用代码部分。 咱们能够开发插件来来实现咱们要的通用的部分，如何开发一个插件呢？这里我就不班门弄斧了，你能够直接查看官网提升的如何开发一个插件

实例展现

经过上边的介绍，你们对于Flutter 有必定的理解，下面咱们实现一个demo项目，如何咱们开始进入实战阶段，咱们具体实现的效果如图下： 主页（Tab栏+Banner轮播图+ViewPaper）：

主页
抽屉：

建立一个项目

经过Android Studio new 一个flutter Project 项目，删除lib/main.dart代码，咱们开始本身实现代码。

添加 MaterialAPP

MaterialAPP 是一个方便的widget，它封装了应用程序实现Material Design所须要的一些widget。Material 风格是咱们一直想实现的风格，这里放到最外层就能实现咱们想要的效果是否是很 Happy？

// 导入用的依赖
import 'package:flutter/material.dart';
// main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写
void main() => runApp(new MyApp());
// 该应用程序继承了 StatelessWidget，这将会使应用自己也成为一个widget。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'home', // 默认标题
      home: new HomePage(), // 返回的界面
    );
  }
}

复制代码

StatelessWidget 和 StatefulWidget 的区别

细心的同窗已经发现，咱们用到的 widget 发现有，StatelessWidget 和 StatefulWidget , 他们的区别以下：

Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 全部的值都是最终的.

Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少须要两个类:

  • 一个 StatefulWidget类。
  • 一个 State类。 StatefulWidget类自己是不变的，可是 State类在widget生命周期中始终存在.
class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
    
}
复制代码

添加 Scaffold 页面框架组件

Scaffold 是 Material library 中提供的一个widget, 它提供了默认的导航栏、标题和包含主屏幕widget树的body属性

class _HomePageState extends State<HomePage> {
    @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      child: new Scaffold(
        appBar: , // 标题
        body: ,//主屏幕
        drawer: ,//抽屉
        bottomNavigationBar: ,// Tab栏 
      ),
    );
  } 
}
复制代码

添加 标题

添加标题比较简单，他的属性很少，我这里只添加 appbar 的名称属性，由于咱们后边须要添加导航栏，标题名称会发生改变，我这里实现代码以下：

class _HomePageState extends State<HomePage> {
  
    @override
    Widget build(BuildContext context) {
    return new DefaultTabController(
      child: new Scaffold(
        appBar: new AppBar(
          title: _getTitle(),// 抽取成方法
        ), // 标题
        body: ,//主屏幕
        drawer: ,//抽屉
        bottomNavigationBar: ,// Tab栏 
      ),
    );
    } 
    // 方法
    _getTitle() {
    switch (index) {
      case 0:
        return _forMatchTitle('电影');
      case 1:
        return _forMatchTitle('图书');
      case 2:
        return _forMatchTitle('音乐');
    }
    }
    
    //获取标题的样式
    _forMatchTitle(String data) {
    return new Text(data);
    }
}

复制代码

添加 抽屉

添加抽屉，就直接在 中对应的属相添加组件便可。

class _HomePageState extends State<HomePage> {
  
    @override
    Widget build(BuildContext context) {
    return new DefaultTabController(
      child: new Scaffold(
        appBar: new AppBar(
          title: _getTitle(),// 抽取成方法
        ), // 标题
        body: ,//主屏幕
        drawer: ,//抽屉
        bottomNavigationBar:  bottomNavigationBar: new BottomNavigationBar(
            onTap: _selectPosition,
            currentIndex: index,
            type: BottomNavigationBarType.fixed,
            iconSize: 24.0,
            items: new List<BottomNavigationBarItem>.generate(3, (index) {
              switch (index) {
                case 0:
                  return new BottomNavigationBarItem(
                      icon: new Icon(Icons.movie), title: new Text('电影'));
                case 1:
                  return new BottomNavigationBarItem(
                      icon: new Icon(Icons.book), title: new Text('图书'));
                case 2:
                  return new BottomNavigationBarItem(
                      icon: new Icon(Icons.music_note), title: new Text('音乐'));
              }
            })),// Tab栏 
      ),
    );
    } 
  
   //获取选中的tab 索引
    _selectPosition(int index) {
    if (this.index == index) return;
    setState(() {
      this.index = index;
    });
  }
}
复制代码

因为篇幅，还剩下主内容、抽屉、轮播图的实现，我就不一一说明了，具体内容我放到了github上，搜索 studylifetime/flutter_demo 就不往文章上贴代码了。具体实现详情能够查看源码，里边注释比较清楚。

总结

对于 Android 开发人员来讲，入门比较简单，dart 与java 很是相似，语言这一关很好过，熟悉一下界面开发，即可快速上手开发了。可是Flutter 如今还不适合商业项目的开发， 平时使用的微信支付、登陆，推送消息，bugly 错误上报，这些都须要国内的厂商来适配，推送、错误上报、分享若是从头作一遍的话，会牵扯公司很大精力。

参考引用

欢迎关注微信公众号，接收第一手技术干货
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程