Flutter 初探
Flutter是一款移动应用程序SDK，一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序，媲美原生应用的性能，是Google新操作系统Fuchsia的默认开发套件。
一、 配置环境
- Android Studio 下载插件Dart、Flutter
- 下载Flutter SDK，配置环境
二、 第一个Flutter项目
- File ->new->new Flutter Project
- lib->main.dart替换成以下代码
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
//Scaffold包含appBar、title、body相当于一个activity
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
//内容
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
运行后时hello world
- 使用外部包(package)
pubspec.yaml是flutter的配置文件，用于管理包和配置flutter信息（等同于build.gradle）。
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
//添加english_words依赖，指定版本号
english_words: ^3.1.0
单击右上角的 Packages get，这会将依赖包安装到您的项目
下面就可以在main.dart中使用english_words了
import 'package:english_words/english_words.dart';
final wordPair = new WordPair.random();
// build时随机生成单词
child: new Text(wordPair.asPascalCase),
点击热重载按键更新正在运行的应用程序
二、Flutter的交互
1、添加有状态的Widget
上面的StatelessWidget是不可变的, 它们的属性值都是final的
对应的Statefulwidgets则是可变的，它们的属性值在widget生命周期中都是可以改变的。
实现一个 stateful widget 至少需要两个类:
- 一个 StatefulWidget类。
- 一个 State类。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在.
class RandomWords extends StatefulWidget {
//创建状态
@override
createState() => new RandomWordsState();
}
//状态类
class RandomWordsState extends State<RandomWords> {
}
2、创建一个无限滚动ListView
class RandomWordsState extends State<RandomWords> {
//变量以下划线（_）开头，在Dart语言中使用下划线前缀标识符，会强制其变成私有的
final _suggestions = <WordPair>[];
//集合存储用户喜欢（收藏）的单词对
final _saved = new Set<WordPair>();
final _biggerFont = const TextStyle(fontSize: 18.0);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Startup Name Generator'),
),
body: _buildSuggestions(),
);
}
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
// 对于每个建议的单词对都会调用一次itemBuilder，然后将单词对添加到ListTile行中
// 在偶数行，该函数会为单词对添加一个ListTile row.
// 在奇数行，该行书湖添加一个分割线widget，来分隔相邻的词对。
// 注意，在小屏幕上，分割线看起来可能比较吃力。
itemBuilder: (context, i) {
// 在每一列之前，添加一个1像素高的分隔线widget
if (i.isOdd) return new Divider();
// 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5
// 时，结果为0, 1, 1, 2, 2， 这可以计算出ListView中减去分隔线后的实际单词对数量
final index = i ~/ 2;
// 如果是建议列表中最后一个单词对
if (index >= _suggestions.length) {
// ...接着再生成10个单词对，然后添加到建议列表
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}
Widget _buildRow(WordPair pair) {
//检查确保单词对还没有添加到收藏夹
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
//尾部添加icon
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
//添加交互，轻点监听
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
3、创建可点击的的List
（1）添加保持状态集合
class RandomWordsState extends State<RandomWords> {
//添加保持状态集合
final _saved = new Set<WordPair>();
...
}
（2）ListTile中的trailing设置尾部icon，onTap设置点击事件监听
Widget _buildRow(WordPair pair) {
//检查确保单词对还没有添加到收藏夹
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
//后面添加icon
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
//添加交互，轻点监听
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}
通过上面的例子，我们懂得如何Widget去创建的我们的页面，保持widget的状态，并实现对应交互，接下来我们学习如何在不同的页面间跳转
三、导航到新的页面
1、Flutter中页面叫做页面路由，分为主路由和新路由
Navigator通过路由栈来管理各个路由页面，Navigator push一个路由页面时，App会显示这个路由页面，Navigator pop时，App将显示上一个页面。
下面代码为push一个页面的操作。
void _pushSaved() {
Navigator.of(context).push(
//创建一个新的页面
new MaterialPageRoute(
//构建页面内容
builder: (context) {
//创建list
final tiles = _saved.map(
(pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = ListTile
.divideTiles(
context: context,
tiles: tiles,
)
.toList();
// 创建页面内容：一个包含喜欢集合的listView
return new Scaffold(
appBar: new AppBar(
title: new Text('Saved Suggestions'),
),
body: new ListView(children: divided),
);
},
),
);
}
四、Flutter Widget概述
Flutter有两种Widget
五、与React Native对比
1、React Native使用HTML+JavaScript渲染成原生控件
-
优点：可以完全继承现代Web开发的所有成果
-
缺点：将渲染工作交交给系统，虽然同样使用类HTML+JS的UI构建逻辑，但是最终会生成对应的自定义原生控件，导致框架本身需要处理大量平台相关的逻辑，随着系统版本变化和API的变化，开发者可能也需要处理不同平台的差异。
2、Flutter有什么优势？
-
提高开发效率
同一份代码开发iOS和Android
用更少的代码做更多的事情
轻松迭代
在应用程序运行时更改代码并重新加载（通过热重载，不需要重启APP，很快）
修复崩溃并继续从应用程序停止的地方进行调试 -
创建美观，高度定制的用户体验
受益于使用Flutter框架提供的丰富的Material Design和Cupertino（iOS风格）的widget
实现定制、美观、品牌驱动的设计，而不受原生控件的限制
Flutter则开辟了一种全新的思路，从头到尾重写一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多。
六、Flutter学习资料
Flutter中文网站
https://flutterchina.club/get-started/install/
Flutter GitHub
https://github.com/flutter/flutter
Flutter examples
https://github.com/flutter/flutter/tree/master/examples
