初识flutter

更新日期: 2019-03-24阅读: 2k标签: Flutter

关注flutter已经好久,因为没有发正式版,所以一直也不想过早的躺浑水,但是最近无意中看到几篇文章,再加上美团和咸鱼等app也一直在做灰度测试,所以上周开始看了一下官方文档,地址:https://flutter.io/docs/get-started/install,然后在此做一下总结。

flutter是Google开发的一套全新的跨平台开源框架。目前flutter已经发布很多很多版本,正在逐步的完善,它的目标其实是和react native一样的,就是同一份代码可以同时运行在Android和iOS两个系统上。如果你同时有react native和flutter开发经验,你就会发现flutter的很多设计理念和react native是一样的,react native基于组件开发页面,flutter则是widget,他们都有自己的生命周期,他们都是自己的属性或者状态,所以对于react native开发者来说,flutter开发只不过换了一种Dart语言,换了一批api,当然这些都是表面的理解。因为react native和flutter有本质的不同,react native渲染的是系统原生控件,flutter则是从头到尾重写了一套UI框架,渲染引擎则依靠Skia图形库实现。下面就具体说一下H5、react native、flutter这些跨平台UI框架的方案。


H5、react native、flutter

最开始的跨平台开发的方案就是H5开发,然后基于Android和iOS的webView完全继承web开发的所有成果,但是由于webview的渲染效率和js的执行性能问题,很难与原生相提并论。然后就到了react native、weex的时代,为了解决webview性能差的问题,这类框架将最终的渲染工作交还给了系统,抛开react native和weex自身对系统版本的bug,性能问题依然没有完美的解决,比如加载react native生成的bundle.js的size过大、bundle.js的加载时间过长导致白屏、页面内手势滑动导致大量的丢帧问题等等,所以我们在适用reactnative时还是需要大量的优化和维护。这个时候flutter借鉴react native孕育而生,为什么是借鉴呢,上面也有提到,其实react native在开发时有很多思想都是相同的。

flutter所使用的语言是Dart,这种语言既支持动态编译又支持静态编译,这也就意味着在JIT模式下我们可以实现热刷新,就像开发js一样,编辑完代码之后,只要保存或者点击 Hot Reload按钮,就可以立即更新到设备上,不用重新编译app。在Flutter中,所有功能都可以通过组合多个Widget来实现,包括对齐方式、按行排列、按列排列、网格排列甚至事件处理等等。Flutter控件主要分为两大类,StatelessWidget和StatefulWidget,StatelessWidget用来展示静态的文本或者图片,如果控件需要根据外部数据或者用户操作来改变的话,就需要使用StatefulWidget。State的概念也是来源于Facebook的流行Web框架React,React风格的框架中使用控件树和各自的状态来构建界面,当某个控件的状态发生变化时由框架负责对比前后状态差异并且采取最小代价来更新渲染结果。


flutter应用

flutter的安装很简单,我们只需要一个flutter的sdk就可以,这里类似于Android里的sdk,开发flutter的编辑器也有很多选择,Android studio、intellij、VS code,这里我选择的是最轻量的vs code。关于这些配置环境我们可以参考官网,说的很清晰。

当我们用vs code生成一个项目后,项目目录如下:


其中lib文件夹下的main.dart文件就是我们要开发的dart文件,pubspec.yaml就是项目的配置文件,ios文件夹和android文件夹分别是iOS和Android两个项目工程

然后我们看一下dart文件:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

可以看到两个类MyApp和MyHomePage,从名字我们就可以看出,一个是App的入口,一个是首页,前者继承StatelessWidget,后者继承StatefulWidget,说明MyApp是不需要状态的,而MyHomePage是需要的,所以它实现了createState方法来生成一个State(不管是StatelessWidget还是StatefulWidget,本身都是不可变的),_MyHomePageState继承了State<MyHomePage>,重写了build方法,返回Scaffold,其实Scaffold中的代码就是展示在页面中的内容。

最后附上flutter的架构图:



链接: https://www.fly63.com/article/detial/2521

移动跨平台框架Flutter介绍和学习线路

Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。

深入理解Flutter多线程

Flutter默认是单线程任务处理的,如果不开启新的线程,任务默认在主线程中处理。和iOS应用很像,在Dart的线程中也存在事件循环和消息队列的概念,但在Dart中线程叫做isolate。

Flutter1.5 开始,将成为全平台 UI 框架!

Flutter 1.5 的发布,同期也宣布发布 Flutter for Web 的 Preview 版本,正式开启了 Flutter 的全平台 UI 框架之路。早在年初发布的 Flutter 2019 Roadmap 中,就有提到,会在今年支持移动设备之外的平台,对 Web 的支持,算是完成了一个新的里程碑吧。

Flutter支持Web开发了!

Flutter作为一个可移植的UI框架,已经支持现代Web应用开发了!我们很开心已经发布了SDK预览版,这样你可以在Web浏览器里直接运行你的Flutter UI代码。

Flutter 混合开发 (交互通信)

Flutter 与原生之间的通信依赖灵活的消息传递方式:1,Flutter 部分通过平台通道将消息发送到其应用程序的所在的宿主环境(原生应用)。2,宿主环境通过监听平台通道,接收消息。

Flutter 局部路由实现

Flutter是借鉴React的开发思想实现的,在子组件的插槽上,React有this.props.children,Vue有<slot></slot>。当然Flutter也有类似的Widget,那就是Navigator,不过是以router的形式实现(像<router-view></router-view>)。

Flutter Kotlin 到底该如何选择?

这两个技术在当下如何选择,我之前在公众号上的回复是:如果你已经处于一个比较满意的公司,并考虑长期发展,公司并未使用这两个技术,你可以专心钻研公司当下使用的,或者未来将要使用的,这些才能助你在公司步步高升。

Flutter 与 iOS 原生 WebView 对比

本文对比的是 UIWebView、WKWebView、flutter_webview_plugin(在 iOS 中使用的是 WKWebView)的加载速度,内存使用情况。测试网页打开的速度,只需要获取 WebView 在开始加载网页和网页加载完成时的时间戳

Flutter For Web

用来构建漂亮、定制化应用的跨平台的 UI 框架 Flutter 现在已经支持 Web 开发了。我们很高兴推出了一个预览版的 SDK 可以让开发者直接使用 Flutter UI 和业务逻辑代码构建 web 应用

Flutter原理:三棵重要的树(渲染过程、布局约束、应用视图的构建等)

了解 HTML 的读者一定听说过 DOM 树这个概念,它由页面中每一个控件组成,这些控件所形成的一种天然的嵌套关系使其可以表示为 “树” 结构,我们也可以将这个概念应用在 Flutter 中

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!