Flutter 跨平台开发为什么选择Flutter

Flutter 跨平台开发为什么选择Flutter

跨平台一直都是移动开发领域所追求却始终难以真正企及的梦想，从最早的 Cordova（没有接触过，想了解可以去这个地方查看
https://www.cnblogs.com/cr330326/p/7082821.html），到前几年的 React Native（环境搭建过运行过demo）、Weex（浏览了一下），
我们一直在探索和追求更完美的移动端方案，而目前的 Flutter 看起来似乎最符合未来的预期。
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作
（我不赞成这种，和现有的安卓ios代码混合使用就会导致不能兼容其他平台上，ios上的功能只能在ios，安卓以前的代码只能在安卓上用）。
在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia
应用的主要方式。
Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。组件描述了在给定
其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter会对比之前的描述，
以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。
发展历史
Flutter的第一个版本被称为“Sky”，运行在Android操作系统上。它是在2015年Dart开发者峰会 [3] 上亮相的，其目的是能够以每秒120帧的
速度持续渲染。
Beta
Beta1版本于2018年2月27日在2018 世界移动大会公布
Beta2版本2018年3月6日发布
1.0版本于2018年12月5日(北京时间)发布
Hello World！

import 'package:flutter/material.dart';
void main() {
    runApp(new Center(
        child: new Text(
            'Hello World!'，
            textDirection: TextDirection.ltr,
        )
    ));
}

在Dart2.0版本之后，可以省略new/const，但目前官方并不推荐，有时会产生编译错误。

import 'package:flutter/material.dart';
void main() {
    runApp(Center(
        child: Text(
            'Hello World!'，
            textDirection: TextDirection.ltr,
        )
    ));
}

runApp函数接收给定的组件(Widget)并使其成为组件树的根。在此例中，组件树由两个组件构成，Center组件和它的子组件-Text组件。
框架强制根组件覆盖整个屏幕，这意味着“Hello, world”文本在屏幕上居中显示。需要注意的是，在上面的Text实例中必须指定文本显示方向。
不必担心，当使用MaterialApp时，它会帮你自动解决这些小事情，稍后将进行演示。

在编写app时，通常会创建新组件，是继承无状态的StatelessWidget还是有状态的StatefulWidget，取决于您的组件是否需要管理状态。
组件的主要工作是实现一个build函数，它使用其他低级别的组件来构建自己。Flutter框架将依次构建这些组件，最终会到达代表底层渲染
对象的组件-RenderObject，它会计算并描述组件的几何形状。

框架特性编辑
快速开发
Flutter的热重载帮助你快捷方便的试验、重构UI、添加特性和修复bug。在仿真器、模拟器和ios、android硬件上体验亚秒级的重载，而不会丢失状态。
绚丽UI
通过Flutter内建的漂亮的质感设计和Cupertino（ios-flavor）小工具、丰富的动画API，平滑的自然滚动和平台感知，让用户感到满意。
响应式
通过Flutter的现代响应式(Reactive)框架和丰富的平台布局和基础组件轻松构建您的用户界面。用强大而灵活的API解决2D、动画、手势、效果等难题。

class CounterState extends State<Counter> {
  int counter = 0;  
  void increment() {
      // 通知Flutter框架状态已改变   
      // 因此框架可以运行build()并更新显示
      setState(() {      
          counter++;    
      });  
  }  
  Widget build(BuildContext context) {
      // 这个方法会在每次setState调用时运行
      // Flutter框架已经对重复快速运行build方法进行优化
      // 因此你可以仅更新你想要更新的任何东西，而不必
      // 更新整个组件实例。  
      return new Row(      
          children: <Widget>[        
              new RaisedButton(         
               onPressed: increment,          
                  child: new Text('Increment'),        
              ),        
              new Text('Count: $counter'),      
          ],    
      );  
  }
}

访问原生功能
通过平台api、第三方sdk和原生代码使您的应用变得生动起来。Flutter让您可以重用您现有的java、swift和Objc代码，
并在iOS和Android上访问原生特性和SDK。

Future<Null> getBatteryLevel() async {
  var batteryLevel = 'unknown';
  try {
    int result = await methodChannel.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result%';
  } on PlatformException {
    batteryLevel = 'Failed to get battery level.';
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}

框架结构编辑
Flutter的主要结构包括：
Flutter engine
Foundation library
Design-specific widgets

在博客中看到，目前阿里内部也在主推 Flutter，而且闲鱼团队目前已经在这方面有了深入的探索，
也与 Google 相关团队有了深度的合作共研，相比之下 Weex 的比例会逐步减弱。由此也可见一些端倪。

为什么是 Flutter

2018 年 12 月初，Google 正式发布了开源跨平台 UI 框架 Flutter 1.0 Release 版本，马蜂窝电商客户端团队进行了调研与实践，
发现Flutter能很好的帮助我们解决开发中遇到的问题。

跨平台开发，针对 Android 与 iOS 的风格设计了两套设计语言的控件实现（Material & Cupertino）。这样不但能够节约人力成本，
而且在用户体验上更好的适配 App 运行的平台。
重写了一套跨平台的 UI 框架，渲染引擎是依靠 Skia 图形库实现。Flutter 中的控件树直接由渲染引擎和高性能本地 ARM 代码直接绘制，
不需要通过中间对象（Web 应用中的虚拟 DOM 和真实 DOM，原生 App 中的虚拟控件和平台控件）来绘制，使它有接近原生页面的性能，
帮助我们提供更好的用户体验。
同时支持 JIT 和 AOT 编译。JIT编译方式使其在开发阶段有个备受欢迎的功能——热重载（HotReload），这样在开发时可以省去构建的过程，
提高开发效率。而在 Release 运行阶段采用 AOT 的编译方式，使执行效率非常高，让 Release 版本发挥更好的性能。

您还可以看看下面的博客文章，回顾以前和继续学习，包含我在学习开发中遇到的难题等等

Flutter入门，学习历程，进入开发，在安卓手机运行起来
 Visual Studio code工具开发flutte总结
 Flutter 跨平台开发为什么选择Flutter
跨平台开发为什么选择Flutter
Android 开发者 for Flutter （1）Flutter和Android中的View对比及如何更新widget
Android 开发者 for Flutter （2）如何布局？ XML layout 文件跑哪去了？及布局中添加或删除组件
 Android 开发者 for Flutter （3） flutter中动画是如何实现的及如何使用Canvas draw/paint
Flutter轮播图编写（两种方式）CarouselSlider和PageView（自动轮播，也可以手动左右拖拽）
flutter 中tabbar切换上下均可，banner轮播图，listview刷新添加更多，listview嵌套gridview
Flutter 项目编写第三方插件库文件引入，本地图片 json数据引入解析
 flutter run 运行项目所遇到的问题总结（Scaffold加padding及 flutter/material.dart’;爆红问题解决；listview嵌套gridview滑动问题）

如对您有帮助，欢迎starts 谢谢。下面是我自己写的demo 可以看看一块学习：

项目源码github：https://github.com/1136346879/flutter-

感谢Flutter 中文网： https://flutterchina.club/technical-overview/

Flutter 跨平台开发 为什么选择Flutter

猜你喜欢

Flutter 跨平台开发为什么选择Flutter