Flutter学习之路(二)
在Flutter学习之路(一)对Flutter有基本了解之后,接下来是对Flutter的深入学习。
本文参考:https://flutterchina.club/get-started/codelab/
三,第一个Flutter App
1.开始
我发现我忘了一点东西,没有介绍Flutter,现在介绍也不晚。
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。简单来说,Flutter是一款移动应用程序SDK,包含框架、控件和一些工具,可以用一套代码同时构建Android和iOS应用,并且性能可以达到原生应用一样的性能。
React-Native、Weex核心是通过Javascript开发,执行时需要Javascript解释器,UI是通过原生控件渲染。Flutter与用于构建移动应用程序的其它大多数框架不同,因为Flutter既不使用WebView,也不使用操作系统的原生控件。 相反,Flutter使用自己的高性能渲染引擎来绘制widget。Flutter使用C、C ++、Dart和Skia(2D渲染引擎)构建。在IOS上,Flutter引擎的C/C ++代码使用LLVM编译,任何Dart代码都是AOT编译为本地代码的,Flutter应用程序使用本机指令集运行(不涉及解释器)。而在Android下,Flutter引擎的C/C ++代码是用Android的NDK编译的,任何Dart代码都是AOT编译成本地代码的,Flutter应用程序依然使用本机指令集运行(不涉及解释器)。因此,Flutter能达到原生应用一样的性能。
同时,Flutter提供了一组自己的widget,由Flutter的framework和引擎管理和渲染。您可以浏览Flutter widget的目录。之所以不适用原生控件,是因为Flutter希望最终结果是更高质量的,如果Flutter使用原生系统widget,Flutter应用的质量和性能将受到这些widget本身质量的限制。例如,在Android中,有一组硬编码的手势和固定的规则来对它们进行手势冲突消歧。在Flutter中,您可以编写自己的手势识别器,该手势识别器是手势系统中的一级参与者 。此外,由不同人撰写的两个小工具可协调手势冲突消歧。
Flutter 用Dart作为开发框架和widget的语言,为什么[Flutter使用Dart语言]。(https://flutterchina.club/faq/#为什么flutter选择使用dart语言)
看完这些,你就会明白,Flutter是全新的东西,比Kotlin还要新,所以拿出第一次学习Android的好奇心来学习Flutter。详细的介绍请看这里,Flutter的框架总览点击这里。
现在开始编写第一个Flutter App。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'My First Flutter AAp',
home: new Scaffold(
appBar: new AppBar(
title: new Text('First Flutter App'),
),
body: new Center(
child: new Text('Hello Flutter'),
),
),
);
}
}
看着很难,自己写一遍会发现这个很简单。一个main函数,调用了runApp()方法,启动一个App,因为是单行函数,所以使用了=>
,这在许多脚本语言中很常见。然后我们自己写了一个MyApp类,继承StatelessWidget。因为在Flutter,万物即Widget,你一个App是Widget不过分吧,重写完方法后,开始绘制界面。这一块陌生又熟悉,陌生的是代码和我们经常使用的xml不一样,熟悉的是title,appBar,有你的哪里都有你。如果不理解或是没记住的,删了多写几遍,书读百遍其意自见。
2.导入外部包
Flutter管理依赖的文件是pubspec.yaml文件,如果要导入外部包,是在这个文件中进行修改。我们先导入english_words包,这个包包含了5000多个常用的英文单词。
在pubspec.xml文件中添加如下代码即可。
english_words: ^3.1.0
位置如下图所示:
添加完后点击右上角的Packages get添加包,或者直接在命令行输入flutter packages get,这两个是相同的。
导入包之后将代码改成下面这样:
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new MaterialApp(
title: 'My First Flutter App',
home: new Scaffold(
appBar: new AppBar(
title: new Text('First Flutter App'),
),
body: new Center(
child: new Text(wordPair.asPascalCase),
),
),
);
}
}
可以看到,只是新建了wordPair变量,然后在显示时使用驼峰命名法,很简单的代码,每次ctrl+s
保存时都会热重载,在界面显示的单词就会不一样,因为这里的单词是随机生成的,不得不说,Flutter选用的这个作为教程真是优雅,即学习了外部库的使用,又展现了热重载的高效性。
3.有状态的Widget(StatefulWidget)