Flutter技術概覽 [復制鏈接]

2019-10-8 10:41
IamCoder 閱讀:116 評論:0 贊:0
Tag:  Flutter

Flutter技術概覽

文章目錄

  • Flutter框架架構
  • Widget
  • Flutter界面渲染簡述
  • 總結

前言

目前hybrid開發模式:

1.通過WebView來進行原生和web交互

2.為了解決WebView性能差的問題,以React Native為代表的一類框架將最終渲染工作交還給了系統,雖然同樣使用類HTML+JS的UI構建邏輯,但是最終會生成對應的自定義原生控件,以充分利用原生控件相對于WebView的較高的繪制效率。

一、Flutter框架架構

Flutter的架構主要分成三層:

  • Framework
  • Engine
  • Embedder

1.Framework

Framework使用dart實現,包括:

  • Material Design風格的Widget,Cupertino(針對iOS)風格的Widgets
  • 文本/圖片/按鈕等基礎Widgets,渲染,動畫,手勢等,此部分的核心代碼是:flutter倉庫下的flutter package
  • sky_engine倉庫下的io,async,ui(dart:ui庫提供了Flutter框架和引擎之間的接口)等package

Widgets:可以理解為組件。

2.Engine

Engine使用C++實現,主要包括:

  • Skia
  • Dart
  • Text

Skia是開源的二維圖形庫,提供了適用于多種軟硬件平臺的通用API。

3.Embedder

Embedder是一個嵌入層

即把Flutter嵌入到各個平臺上去,這里做的主要工作包括渲染Surface設置,線程設置,以及插件等。從這里可以看出,Flutter的平臺相關層很低,平臺(如iOS)只是提供一個畫布,剩余的所有渲染相關的邏輯都在Flutter內部,這就使得它具有了很好的跨端一致性。

從架構圖可以看出,從頭到尾重寫一套跨平臺的UI框架,包括UI控件、渲染邏輯甚至開發語言。

1.渲染引擎依靠跨平臺的Skia圖形庫來實現,依賴系統的只有圖形繪制相關的接口,可以在最大程度上保證不同平臺、不同設備的體驗一致性;

2.邏輯處理使用支持AOT的Dart語言,執行效率也比JavaScript高得多。

二、Widget

目前上主流的思想,都希望將各個ui控件解耦,慢慢演變出組件化的思想。

Flutter控件主要分為兩大類:

  • StatelessWidget
  • StatefulWidget

StatelessWidget

顧名思義,StatelessWidget是狀態不可變的widget。初始狀態設置以后就不可再變化。如果需要變化需要重新創建。

當傳入數據改變時會重新渲染UI。

StatelessWidget用來展示靜態的文本或者圖片。

StatefulWidget

當傳入數據和本類數據改變時StatefulWidget都會重新渲染UI。

如果控件需要根據外部數據或者用戶操作來改變的話,就需要使用StatefulWidget。

什么是State?

State的概念來源于Facebook的流行Web框架React,React風格的框架中使用控件樹和各自的狀態來構建界面,當某個控件的狀態發生變化時由框架負責對比前后狀態差異并且采取最小代價來更新渲染結果。

widget怎么保存狀態的?

Flutter是通過引入了State來保存狀態

當State的狀態改變時,能重新構建本節點以及孩子的Widget樹來進行UI變化。如果需要主動改變State的狀態,需要通過setState()方法進行觸發,單純改變數據是不會引發UI改變的。

三、Flutter界面渲染簡述

Flutter界面渲染過程分為三個階段:

  • 布局
  • 繪制
  • 合成

布局和繪制在**Flutter框架(Framework)中完成,合成則交由引擎(Engine)**負責。

詳細的渲染原理將在《Flutter技術原理詳解》講解。

四、總結

Flutter與ReactNative的對比

RN的渲染機制是基于前端框架的考慮,復雜的UI渲染是需要依賴多個view疊加

例如渲染一個復雜的ListView,每一個小的控件,都是一個native的view,然后相互組合疊加,當每次滾到刷新時,性能都是一個巨大的考驗。

ReactNative

  • 采用Javascript開發,需學React,成本高
  • 需要JavaScript橋接器,實現JS到Native轉化,性能耗損
  • 訪問原生UI,頻繁操作易出性能問題
  • 支持線上動態性,可有效避免頻繁更新版本

Flutter

  • 采用Dart開發,可直接編譯成Native代碼(易學)
  • 自帶UI組件和渲染器,僅依賴系統提供的Canvas(無橋接耗損)
  • 暫不支持線上動態性,目前Android支持,iOS不支持

我來說兩句
您需要登錄后才可以評論 登錄 | 立即注冊
facelist
所有評論(0)
領先的中文移動開發者社區
18620764416
7*24全天服務
意見反饋:[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )

重庆时时彩开奖模拟器