开始之前
本人使用 Flutter 开发的一个图文 App每日图文, 可以同时运行在 Android 和 iOS 上, 欢迎体验, 喜欢的话还不吝 Star 一下.
叮叮叮~ 传送门 https://github.com/ChenLittlePing/Daily
Flutter 为何物?
随着移动 App 开发成本越来越高, 近几年, 移动跨平台开发的呼声层出不穷, 如 FaceBook 的推出 React-Native, 大受欢迎, 但其性能并不如人意.
目前还处于测试版本阶段: Beta 3.
Flutter 编程语言
Flutter 使用的编程语言是 Dart,Dart 是一门动态语言, 几年前扬言要替换 JavaScript 地位, 结果可想而知.
想必还是很多人都没听说过这门语言吧, 原谅我也没听过. 没想到如今 Dart 以这样的形式再次出现在开发者面前.
Dart 虽然是一门动态语言, 但是像极了 Java, 作为一名 Android 开发者, 几乎可以无缝切换, 跟 Kotlin 也有几分相似. 相比 Java,Dart 更为简洁.
具体可以到 Dart 语言中文社区 http://www.cndartlang.com/ 了解学习.
Flutter 特点
支持热加载, 运行之后, 修改代码无需重新安装和启动, 提升开发调试效率
支持数据状态绑定, 修改数据后自动刷新页面
所有的 UI 都是 Widget, 包括页面
Flutter 环境配置
首先 clone Flutter 的 repo
- git clone -b beta https://github.com/flutter/flutter.git
- export PUB_HOSTED_URL=https://pub.flutter-io.cn // 国内用户需要设置
- export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // 国内用户需要设置
- export PATH=`pwd`/flutter/bin:$PATH
然后检查是否需要安装其它依赖, 根据提示来安装其它的依赖
flutter doctor
如果是 Mac 的话, 需要配置 Flutter 全局环境变量, 在命令行输入:
$HOME/.bash_profile
在. bash_profile 文件添加以下环境变量:
其中 **[PATH_TO_FLUTTER_GIT_DIRECTORY]** 是上面 clone 的 Flutter Repo 的本地路径
- export PUB_HOSTED_URL=https://pub.flutter-io.cn // 国内用户需要设置
- export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // 国内用户需要设置
- export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
最后运行来生效当前命令行窗口:
source $HOME/.bash_profile
更多平台配置可到 [Flutter 中文网 https://flutterchina.club/get-started/install/ ] 了解
Flutter 开发工具配置
Flutter App 可以使用 VS Code,Android Studio,IntelliJ 进行开发. 我直接用的 Android Studio.
开始之前, 你需要安装两个插件:
Flutter 插件: 支持 Flutter 开发工作流 (运行, 调试, 热重载等).
Dart 插件: 提供代码分析 (输入代码时进行验证, 代码补全等).
如果在 AS 中无法在线安装, 可以到以下链接中下载离线安装:
Flutter 插件下载 https://plugins.jetbrains.com/plugin/9212-flutter
Dart 插件下载 https://plugins.jetbrains.com/plugin/6351-dart
注意下载的插件版本一定要和 Android Studio JRE 版本对应上, 可以在 Android Studio -> About Android Studio 中查看版本.
模拟器配置
Android Studio 支持 Android 模拟器和 iPhone 模拟器预览, 具体安装参见 Flutter 中文网 https://flutterchina.club/setup-macos/ , 这里不再赘述.
新建 Flutter App 工程
安装了以上两个插件后, 就可以在 Android Studio 中新建 Flutter 工程了, 按照提示新建即可.
工程目录如下:
可以看到, 工程目录结构主要分为 3 部分, 分别是:
android 存放 Android 相关的东西, 如 App 图标
ios 存放 iOS 相关的东西, 如 App 图标
lib 存放 Flutter 源码
重点来看 Flutter 的入口: 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',
- home: new Scaffold(
- appBar: new AppBar(
- title: new Text('Welcome to Flutter'),
- ),
- body: new Center(
- child: new Text('Hello World'),
- ),
- ),
- );
- }
- }
整个 App 的入口在 void main() 方法中. 接下来, 就来理清一下这个简单的代码.
Flutter 页面架构
App 开发最重要的就是 UI 框架, Flutter 重新定制一套自己的 UI 框架, 在底层使用了 Skia 进行渲染.
在 Flutter 中, 一切皆是 Widget, 页面是 Widget, 普通的控件也是 Widget.
UI 布局和控件
从 main.dart 中可以看到, Flutter 的布局是一层一层嵌套形成的.
第一层是 Scaffold, 一个实现了 Material design 的布局控件, 包含了一个 AppBar 和一个 body, 分别对应标题栏和页面.
第二层 body 是一个 Center 布局控件, 该布局用于使其子布局即 child, 在父布局中居中显示
最后的子布局是一个 Text 控件.
整个布局就是在页面的中间显示了 Hello World.
页面控件: StatelessWidget 和 StatefulWidget
MyApp 继承的 StatelessWidget, 就是其中一个页面相关的 Widget, 这个窗口的特点是静态, 页面中的数据一旦渲染后, 就不能在更改, 一般用于显示静态页面.
另一个 StatefulWidget, 则是可以改变状态的 Widget, 页面的显示随着状态改变而改变. 通过 setState 方法可以非常方便的修改页面状态, 与现在 web 动态绑定框架是类似的.
一个 StatefulWidget 页面看起来是这样的:
- class MyHomePage extends StatefulWidget {
- MyHomePage({Key key, this.title}) : super(key: key);
- final String title;
- @override
- _MyHomePageState createState() => new _MyHomePageState();
- }
- class _MyHomePageState extends State<MyHomePage> {
- int _counter = 0;
- void _incrementCounter() {
- setState(() {
- _counter++;
- });
- }
- @override
- Widget build(BuildContext context) {
- return new Scaffold(
- appBar: new AppBar(
- title: new Text(widget.title),
- ),
- body: new Center(
- child: new Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: <Widget>[
- new Text(
- 'You have pushed the button this many times:',
- ),
- new Text(
- '$_counter',
- style: Theme.of(context).textTheme.display1,
- ),
- ],
- ),
- ),
- floatingActionButton: new FloatingActionButton(
- onPressed: _incrementCounter,
- tooltip: 'Increment',
- child: new Icon(Icons.add),
- ),
- );
- }
- }
可以看到, StatefulWidget 的业务逻辑基本上都在_MyHomePageState 中, 这个类继承了 State.
当点击了 FloatingActionButton 时, 就会调用_incrementCounter() 方法进行 setState(), 页面就会跟着改变了.
注: Dart 使用下刷线_表示私有, 如上面的_count 和_incrementCounter()
由于 Flutter 的布局模式, 当页面比较复杂时, 整个布局会变得非常复杂, 可读性也大大降低了, 修改起来非常麻烦.
另外, Flutter 为了布局灵活性, 定义了太多的布局控件, 几十个布局看得眼花缭乱, 从来没见过这么多布局的框架.
Flutter 插件管理
Flutter 使用 pubspec.yaml 管理插件库, 具体如下:
name: daily
description: A application to look up photo and article
- # 依赖插件配置
- dependencies:
- flutter:
- sdk: flutter
- cupertino_icons: ^0.1.2
- dev_dependencies:
- flutter_test:
- sdk: flutter
- flutter:
- uses-material-design: true
- #本地资源配置
- assets:
- - images/ic-pic-loading.png
- - images/ic-pic-article.gif
- Run App
通过 Android Studio 就可以直接在模拟器上安装 App 了, 当然, 前提是你要先配置好模拟器.
如果修改了代码, 就可以直接通过热加载, 直接显示修改的内容, 无需重新安装打开, 大大节省了调试时间.
总结
Flutter 的对于熟悉 Java 或者 Android 开发的人来说, 还是比较友好的, 可以比较快的熟悉和掌握基本的开发工具和开发理念;
Flutter App 的性能确实还是不错的, 整个的体验与原生 App 基本差不多;
热加载非常好用, 可以节省不少时间;
支持数据和状态自动绑定, 通过 setState 可以非常方便的修改页面状态;
Flutter 布局嵌套非常坑爹, 布局复杂将会非常痛苦;
基本上实现 Android 和 iOS 一套代码通用, 开发效率大大提高了.
仍然有许多需要改进的地方, 许多特性支持也不太好, 如 webview 这些需要使用第三方插件, 或自己定制.
现在 Flutter 仍然为 Beta 版本, 希望后面可以带来更多惊喜和更好的体验吧.
来源: https://juejin.im/post/5b178a6851882513bb1c5a1e