likes
comments
collection
share

Flutter学习入门——了解Flutter！

作者站长头像
站长
· 阅读数 34

一、flutter简介

官网：官网Flutter

Github源码：Flutter Github源码下载

资料：Flutter基础课程下载

Dart官网：Dart

  • 框架概况 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia 应用的主要方式。 Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter会对比之前的描述， 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

Flutter以一种类似游戏引擎，提供通过类似游戏开发的方式，以一套代码生成Android和iOS平台两种应用，很大程度上减少了App开发和维护的资源，同时Dart语言强大的性能表现和丰富的特性，使得开发比较便利，但是Flutter目前还处于Alpha阶段，许多功能还不是特别完善，完全替代目前Android和iOS开发还有比较长的路要走。

  • 发展历史 Flutter的第一个版本被称为“Sky”，运行在Android操作系统上。它是在2015年Dart开发者峰会上亮相的，其目的是能够以每秒120帧的速度持续渲染。 Beta Beta1版本于2018年2月27日在2018 世界移动大会公布。 Beta2版本2018年3月6日发布。 1.0版本于2018年12月5日(北京时间)发布。

二、Flutter的优势

  • 高生产率

    1. 一套代码可以开发出 Android 和 iOS 应用

    2. Dart语言优越性，使得同样的功能只需要很少的代码。

    3. 迭代更加方便， hot reload 功能

  • 创建优雅的、高度可定制的用户界面

    1. Flutter 内置了对Material Design和Cupertino (iOS-flavor)的 UI 组件库

    2. 提供了可定制的 UI 组件，不再受制于OEM控件的限制

三、Flutter框架特性

  • 快速开发 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(          o
                  nPressed: 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学习入门——了解Flutter！

Flutter 分为两个部分，上层是函数响应式的Framework（开源），下层是Engine，可以这样理解，基于Framework开发App，在Engine里运行。

  • 与RN的区别

Flutter学习入门——了解Flutter！ Flutter将UI组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas，以便定制的UI组件可以出现在设备的屏幕上。Dart程序和执行数据编码和解码的原生平台代码（蓝色，适用于iOS或Android）之间仍然有一个接口，但这能比JavaScript桥接器快几个数量级。

五、Flutter框架结构

官方推荐的集成开发环境是IntelliJ，工程的层次结构大致是这样的：

Flutter学习入门——了解Flutter！

可以看到，Flutter框架自动生成了android目录和ios目录，并且框架已经做好了粘合两种平台的连接代码，开发者只需要在lib目录用Dart语言，基于其Framework编写App，即实现了一套代码产生两个平台的App。其中：

  • Android：底层引擎是C++代码通过Android的NDK编译，上层通过Dart编译器编译，以native code方式运行
  • iOS：底层引擎是C++代码通过LLVM编译，上层通过AOT-compiled，也是以native code方式运行

1. widget特性

Widget 是每个 Flutter 应用的基础。每个 Widget 是一部分用户界面上不可变的定义。和其他框架把 View、controller、 Layout 和其他资源分开定义不一样，Flutter 具有一致的、唯一的对象模型—— Widget：

  • 一个结构性的元素（比如 按钮或者菜单）
  • 一个元素的风格（比如 字体或者颜色）
  • 指定布局属性（比如 padding）
  • 也可以包含一些业务逻辑 Widget 通过组合来组成层级结构。每个 Widget 都内嵌在父 Widget 中，并继承父 Widget 的属性。 并没有单独的 “application” 对象，根 Widget 扮演这个角色。Widget 可以响应用户事件来改变 UI，比如用户点击了一个按钮把一个 Widget 替换为另外一个 Widget。框架会比较变化前后 UI 的差异，并高效的更新 UI。

Flutter学习入门——了解Flutter！ Widget Frame相关文档：Widget Frame

收录自|原文地址

资料下载

转载自:https://juejin.cn/post/7013254121654321189
评论
请登录