从零开始学习 flutter web前端开发总动员移动应用

快速开发跨平台App的神器——Dart + Flutter

2018-09-07  本文已影响257人  Amos_Shen

最近开始关注前端如何开发跨平台的App。有两个名词非常高频的暴露在视野中,稍作调研,很快就被惊艳到了,那就是Dart语言Flutter移动UI框架。这两位新星来自于同一个爸爸,那就是Google。

下面简单的介绍一下这两位新星:

1、Dart

Dart亮相于2011年10月10至12日在丹麦奥尔胡斯举行的GOTO大会上。可以用于web、服务器、移动应用和物联网等领域的开发。

Dart是一种面向对象的、类定义的、单继承的语言,语法类似C语言,可以转译为JavaScript,支持接口(interfaces)、混入(mixins)、抽象类(abstract classes)、具体化泛型(reified generics)、可选类型(optional typing)和sound type system。Dart编程语言在所有现代的浏览器和环境中提供高性能。目前最新的版本是2018年2月发布的Dart2。以下是来自官网的几段代码示例,我们可以先看看它的风格:(本人觉得前端熟悉了ES6,学习Dart没有太大难度)

// Define a function.
printInteger(int aNumber) {
  print('The number is $aNumber.'); // Print to console.
}

// This is where the app starts executing.
main() {
  var number = 42; // Declare and initialize a variable.
  printInteger(number); // Call a function.
}
int fibonacci(int n) {
  if (n == 0 || n == 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

var result = fibonacci(20);
class Spacecraft {
  String name;
  DateTime launchDate;

  // Constructor, with syntactic sugar for assignment to members.
  Spacecraft(this.name, this.launchDate) {
    // Initialization code goes here.
  }

  // Named constructor that forwards to the default one.
  Spacecraft.unlaunched(String name) : this(name, null);

  int get launchYear =>
      launchDate?.year; // read-only non-final property

  // Method.
  void describe() {
    print('Spacecraft: $name');
    if (launchDate != null) {
      int years =
          DateTime.now().difference(launchDate).inDays ~/
              365;
      print('Launched: $launchYear ($years years ago)');
    } else {
      print('Unlaunched');
    }
  }
}


var voyager = Spacecraft('Voyager I', DateTime(1977, 9, 5));
voyager.describe();

var voyager3 = Spacecraft.unlaunched('Voyager III');
voyager3.describe();

//Dart has single inheritance.
class Orbiter extends Spacecraft {
  num altitude;
  Orbiter(String name, DateTime launchDate, this.altitude)
      : super(name, launchDate);
}

2、Flutter

Flutter是Google使用Dart语言开发的移动应用开发框架,使用Dart代码构建高性能、高保真的混合移动应用(这样你就可以编写一份代码,在 Android 和 iOS 都可以运行这个应用程序)。 最新的版本为Preview 1.0 。市面上已经有了很多跨平台解决方案, Xamarin、PhoneGap、Inoic、React Native 等等。我们有很多选择,它们也各有一些优点和缺点。

相比较其他的,Flutter主要解决了移动开发中的两个重要问题,一是原生应用程序的性能与平台的集成;二是提供多平台、可移植的UI工具包支持高效应用开发。另外,Flutter中UI组件和渲染器都从平台中集成到用户的应用程序中,所以原来虚拟的控件树是真实的控件树,所以渲染和绘制的速度会很快,动画发生在用户空间中,开发人员也可以对其进行很多的控制。

除此之外,在以下方面Flutter也有优势:

以下是Flutter的一个开发示例图:


Flutter热重载

以下是用Flutter开发的应用示例图:

Flutter开发的APP

3、Dart和Flutter的一些学习网站收集

上一篇下一篇

猜你喜欢

热点阅读