发表日期:2018-06 文章编辑:小灯 浏览次数:4296
本人使用Flutter开发的一个图文App《每日图文》,可以同时运行在Android和iOS上,欢迎体验,喜欢的话还不吝Star一下。
叮叮叮~ 传送门
demo.gif随着移动App开发成本越来越高,近几年,移动跨平台开发的呼声层出不穷,如FaceBook的推出React-Native,大受欢迎,但其性能并不如人意。
2018年2月27日世界移动大会上,谷歌发布一个跨平台开发框架,名曰Flutter,用于构建高性能的原生Android和iOS两大平台的App。
目前还处于测试版本阶段:Beta 3。
Flutter使用的编程语言是Dart,Dart是一门动态语言,几年前扬言要替换JavaScript地位,结果可想而知。
想必还是很多人都没听说过这门语言吧,原谅我也没听过。没想到如今Dart以这样的形式再次出现在开发者面前。
Dart虽然是一门动态语言,但是像极了Java,作为一名Android开发者,几乎可以无缝切换,跟Kotlin也有几分相似。相比Java,Dart更为简洁。
具体可以到Dart语言中文社区了解学习。
首先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中文网】了解
Flutter App可以使用VS Code、Android Studio、IntelliJ进行开发。我直接用的Android Studio。
开始之前,你需要安装两个插件:
如果在AS中无法在线安装,可以到以下链接中下载离线安装:
注意下载的插件版本一定要和Android Studio JRE版本对应上,可以在Android Studio -> About Android Studio中查看版本。
Android Studio支持Android模拟器和iPhone模拟器预览,具体安装参见Flutter中文网,这里不再赘述。
安装了以上两个插件后,就可以在Android Studio中新建Flutter工程了,按照提示新建即可。
新建工程工程目录如下:
工程目录可以看到,工程目录结构主要分为3部分,分别是:
重点来看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()方法中。接下来,就来理清一下这个简单的代码。
App开发最重要的就是UI框架,Flutter重新定制一套自己的UI框架,在底层使用了Skia进行渲染。
在Flutter中,一切皆是Widget,页面是Widget,普通的控件也是Widget。
从main.dart中可以看到,Flutter的布局是一层一层嵌套形成的。
第一层是Scaffold,一个实现了Material design的布局控件,包含了一个AppBar和一个body,分别对应标题栏和页面。
第二层body是一个Center布局控件,该布局用于使其子布局即child,在父布局中居中显示
最后的子布局是一个Text控件。
整个布局就是在页面的中间显示了Hello World。
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使用pubspec.yaml管理插件库,具体如下:
name: daily description: A application to look up photo and article#依赖插件配置 dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2dev_dependencies: flutter_test: sdk: flutterflutter:uses-material-design: true#本地资源配置 assets: - images/ic-pic-loading.png - images/ic-pic-article.gif
通过Android Studio就可以直接在模拟器上安装App了,当然,前提是你要先配置好模拟器。
如果修改了代码,就可以直接通过热加载,直接显示修改的内容,无需重新安装打开,大大节省了调试时间。
现在Flutter仍然为Beta版本,希望后面可以带来更多惊喜和更好的体验吧。
日期:2018-10 浏览次数:7166
日期:2018-12 浏览次数:4233
日期:2018-07 浏览次数:4793
日期:2018-12 浏览次数:4082
日期:2018-09 浏览次数:5414
日期:2018-12 浏览次数:9831
日期:2018-11 浏览次数:4725
日期:2018-07 浏览次数:4503
日期:2018-05 浏览次数:4773
日期:2018-12 浏览次数:4236
日期:2018-10 浏览次数:5056
日期:2018-12 浏览次数:6125
日期:2018-11 浏览次数:4376
日期:2018-08 浏览次数:4509
日期:2018-11 浏览次数:12529
日期:2018-09 浏览次数:5487
日期:2018-12 浏览次数:4752
日期:2018-10 浏览次数:4098
日期:2018-11 浏览次数:4446
日期:2018-12 浏览次数:5968
日期:2018-06 浏览次数:3916
日期:2018-08 浏览次数:5351
日期:2018-10 浏览次数:4381
日期:2018-12 浏览次数:4403
日期:2018-07 浏览次数:4271
日期:2018-12 浏览次数:4421
日期:2018-06 浏览次数:4295
日期:2018-11 浏览次数:4282
日期:2018-12 浏览次数:4162
日期:2018-12 浏览次数:5194
Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.