内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

Flutter爱之初体验

2018-05-11 14:24 出处:清屏网 人气: 评论(0

Flutter是什么?

Flutter是Google公司出品,用于构建iOS和Android App的跨平台SDK,被世界各地的开发人员和组织使用,并且是免费开源的,开发者使用Dart编程语言构建App。

Flutter 的目标是用一套Dart语言创建高性能、高帧率、低延迟的 Android 和 iOS 或Fuchsia应用。并且开发出来的应用在不同的平台用起来跟原生应用具有一样的体验。

Flutter具有什么特点?

  • 响应式视图的优点,不需要JavaScript的桥接器

  • 快速,流畅,可预测; 代码将AOT编译为本机(ARM)代码

  • 开发人员完全控制UI组件和布局

  • 配有美观,可定制的UI组件

  • 强大的开发者工具,惊人的热重新加载

  • 性能更好,兼容性更好,开发起来更有乐趣

Flutter和ReactNative有什么区别?

React Native是非常受欢迎的(这是它应得的),但是因为JavaScript访问了原生UI组件,所以它也必须经过这些“桥接器”,界面上的UI控件通常被频繁地访问(在动画、转化或者用户用手指“滑动”屏幕上的某些东西时,每秒被访问高达60次),因此这很可能会导致性能问题。

React Native中View渲染过程

和React Native一样,Flutter也提供响应式的视图,Flutter采用不同的方法避免由JavaScript桥接器引起的性能问题,即用名为Dart的程序语言来编译。Dart是用预编译的方式编译多个平台的原生代码,这允许Flutter直接与平台通信,而不需要通过执行上下文切换的JavaScript桥接器。编译为原生代码也可以加快应用程序的启动时间。

Flutter中View渲染过程

实际上,Flutter是唯一提供响应式视图而不需要JavaScript桥接器的移动SDK,这就足以让Fluttter变得有趣而值得一试。

热重载

用流行的响应式框架构建UI,Flutter提供了丰富的基础库,用强大而灵活的API解决2D、动画、手势、效果等等的棘手UI挑战。

class CounterState extends State<Counter> {
  int counter = 0;

  void increment() {
    // Tells the Flutter framework that state has changed,
    // so the framework can run build() and update the display.
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // This method is rerun every time setState is called.
    // The Flutter framework has been optimized to make rerunning
    // build methods fast, so that you can just rebuild anything that
    // needs updating rather than having to individually change
    // instances of widgets.
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }}

Flutter安装

1 下载 flutter sdk

Gesantung:Work Project apple$ git clone -b beta https://github.com/flutter/flutter.git

2 设置环境变量(临时)

Gesantung:Work Project apple$ export PATH=`pwd`/flutter/bin:$PATH

3 下载依赖

Gesantung:Work Project apple$ flutter doctor

note :一定要把临时的环境变量设置为全局的,如下图,不然每次重开Terminal都找不到flutter。

Flutter性能

模拟器下性能数据都还可以,但真机体验不好,列表滚动可见明显卡顿。

iPhoneX 模拟器

iPhone 5s 性能数据

总结

iOS下开发工具集还不友好,目前只能使用Android Studio 或 IntelliJ,并不支持Xcode,页面间动画切换生硬,滚动不是很流畅,可能还需要优化,组件也不完善,但Flutter提供了一种全新的跨平台思路,值得我们持续关注。

声明:本文部分素材来源:flutter开发者

Google I/O 2018 Flutter

访问https://google.com/io/,在这里您可以在线观看以下每个会话,包括直播和点播:

今年的IO大会Google花了很多的时间来介绍Flutter,下面就来看下具体的Flutter时间吧。

5月9日上午8:30 PDT - 用Flutter和Material Design编写漂亮的用户界面。

5月9日下午2:30 PDT - 移动设备的发展使Flutter和Firebase有趣

5月10日上午10:30 PDT - 使用Flutter构建反应式移动应用程序

5月10日下午3:30 PDT - 将Firebase添加到您的跨平台React Native或Flutter应用

分享给小伙伴们:
本文标签: Flutter

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号