Flutter Transform使用介紹

窗口小部件(Widget)可以在Paint之前應用Transform進行轉(zhuǎn)換，通過Transform可以對widget進行平移、旋轉(zhuǎn)、縮放等矩陣變換。不像RotatedBox在layout前就對Widget進行旋轉(zhuǎn)操作，Transform是在Widget繪制前進行轉(zhuǎn)換，這意味著在計算Widget的顯示需要占用多少空間時，不會去考慮Transform變換。

目前創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設、域名、虛擬主機、網(wǎng)站托管、企業(yè)網(wǎng)站設計、武清網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

例子

在垂直方向移動15個單位距離

例子

順時針旋轉(zhuǎn)45°

例子

放大1.5倍

Flutter Plugin的坑

[GeneratedPluginRegistrant registerWithRegistry:self]默認注冊到self.window.rootViewController的。 所以需要先初始化rootViewController,再注冊Plugin。

如果Window的rootViewController不是FlutterViewController，直接注冊Plugin會注冊失敗。我們需要將Plugin注冊到指定的FlutterViewController。

Flutter App啟動后，Native調(diào)用Flutter失敗？

這是因為Plugin Channel的初始化大概要1.5秒，而且這是一個異步過程。雖然Flutter頁面顯示出來了，但是Plugin Channel還沒初始化完，所以這時Native調(diào)用Flutter是沒反應的。

Flutter筆記-調(diào)用原生IOS高德地圖sdk

2017年底因公司業(yè)務組合部門調(diào)整，新的團隊部分維護的項目用React Native技術(shù)混合開發(fā)。為適應環(huán)境變化，開啟瘋狂RN學習之旅，晚上回來啃資料看視頻。可能由于本身對RN技術(shù)體驗不感冒或者在環(huán)境之下強迫學習有點不爽。開始尋找代替方案，F(xiàn)luter像一束曙光引起了我的注意，之后一直關注并利用閑余時間開始探索。2018年一直學習到使用Flutter寫項目，從0.2.0開始到現(xiàn)在1.5版本的發(fā)布，終于開始慢慢的爬出坑位了，但是因為部分控件感覺還是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因項目中嚴重使用依賴地圖，故而做了Fluterr使用原生IOS高德地圖調(diào)研。因為我本身是一名android開發(fā)人員，初學IOS并記錄下來。

PlatformView是 flutter 官方提供的一個可以嵌入 Android 和 iOS 平臺原生 view 的小部件。

在我們實際開發(fā)中，我們遇到一些 flutter 官方?jīng)]有提供的插件可以自己創(chuàng)建編寫插件來實現(xiàn)部分功能，但是原生View在 flutter 中會遮擋住flutter 中的小部件，比如你想使用高德地圖sdk、視頻播放器、直播等原生控件，就無法很好的與 flutter 項目結(jié)合。

1、info.plist文件設置

2、 ios 端實現(xiàn)原生組件PlatformView提供原生view

3 、ios 端創(chuàng)建PlatformViewFactory用于生成PlatformView

4、 ios 端創(chuàng)建FlutterPlugin用于注冊原生組件

5 、flutter 平臺嵌入 原生view

iOS端的UiKitView目前還只是preview狀態(tài), 默認是不支持的, 需要手動打開開關, 在info.plist文件中新增一行io.flutter.embedded_views_preview為true.

創(chuàng)建類 FlutterMapView 并實現(xiàn)FlutterPlatformView 協(xié)議

FlutterMapView.h

FlutterMapView.m

FlutterMapFactory.h

FlutterMapFactory.m

FlutterMapPlugin.h

FlutterMapPlugin.m

請前往 高德開放平臺控制臺 申請 iOS Key。

注意：Bundle Identifier需要與申請的時候填寫的一致

地圖依賴的庫列舉如下：

基礎 SDK AMapFoundationKit.framework

第一步：將解壓后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夾中，左側(cè)目錄選中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中點擊“+”按鈕，在彈出的窗口中點擊“Add Other”按鈕，選擇工程目錄下的 MAMapKit.framework 文件添加到工程中。

千萬不要忘記將AMapFoundationKit也一起加入工程。

3D地圖正確配置應如下圖所示：

需要引入的資源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle資源文件中存儲了定位、默認大頭針標注視圖等圖片，可利用這些資源圖片進行開發(fā)。

左側(cè)目錄中選中工程名，在右鍵菜單中選擇Add Files to “工程名”…，從MAMapKit.framework中選擇AMap.bundle文件，并勾選“Copy items if needed”復選框，單擊“Add”按鈕，將資源文件添加到工程中。

成功跑起來 。。 。

為什么Flutter開發(fā)APP性能最接近原生，前端程序員請關注

Flutter是谷歌公司推出的跨終端的開發(fā)框架，支持Android、iOS和WEB終端。1.0版在2018年12月5日發(fā)布，目前的最新版本是1.5，它采用的開發(fā)語言是Dart，Dart也是谷歌開發(fā)的計算機編程語言，語法類似C，是編譯型語言：

hello world例子，打印字符串“Hello World!”：

1、沒有橋接層

React Native、Weex等技術(shù)都是跨終端的框架，然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的：

React Native、Weex等技術(shù)多了一個橋接層，所以界面渲染會慢一些，由于UI渲染非常頻繁，想要不卡頓，基本上比較難，性能和用戶體驗跟原生代碼有差距。而這恰恰是Flutter的優(yōu)勢所在：

Dart可以被編譯成不同平臺的本地代碼，讓Flutter不通過橋接層直接跟平臺通信，自然性能會快一些。

2、編譯執(zhí)行

JavaScript是解釋執(zhí)行的，Dart是編譯執(zhí)行的，性能誰好一目了然。

3、Flutter Engine虛擬機

Flutter是依靠Flutter Engine虛擬機在iOS和Android上運行的，F(xiàn)lutter Engine使用C/C++編寫，開發(fā)人員通過Flutter框架直接和API在內(nèi)部進行交互，所以具有輸入低延遲和UI渲染高幀速率的特點。除了這特點之外，F(xiàn)lutter還提供了自己的小部件，F(xiàn)lutter小部件是使用從React獲取靈感的現(xiàn)代框架構(gòu)建的。 中心思想是您使用小部件構(gòu)建UI。

窗口小部件根據(jù)其當前配置和狀態(tài)描述了它們的視圖。 當窗口小部件的狀態(tài)發(fā)生更改時，窗口小部件會重建其描述，框架將根據(jù)前面的描述進行區(qū)分，以確定底層呈現(xiàn)樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改。可以直接在OS平臺提供的畫布上進行描繪，也就是一些核心類庫直接放到虛擬機里面，調(diào)用起來更快。

從它的系統(tǒng)結(jié)構(gòu)可以看出，類似安卓的ART(Android Run Time)虛擬機，同樣采用AOT(Ahead of TIme)技術(shù)，會在APP安裝時就編譯成機器語言，不再解釋執(zhí)行，從而優(yōu)化了APP運行的性能。

4、自帶渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系統(tǒng)自帶Skia引擎，iOS平臺上Flutter也會把Skia引擎打包到APP中，從而實現(xiàn)了高效渲染。而React Native通過橋接層訪問原生UI，操作頻繁就容易出性能問題。

綜合所述，F(xiàn)lutter 是性能最接近原生代碼 的一種開發(fā)框架，未來也會是構(gòu)建谷歌Fuchsia應用的主要方式，前途不可限量，唯一的問題就是需要學習一門新的語言：Dart，而有Java或者C#語言基礎的程序員會比較容易學習。

flutter RichText在iOS上文本顯示問題

在Flutter中有一些場景會需要展示多格式的文本也就是富文本，這個時候我們可以使用RichText+TextSpan的方式來做展示。不過會發(fā)現(xiàn)iOS系統(tǒng)中如果設置字體顯示很大，這里的文本顯示就會很小。

用Text.rich來代替RichText

問題的關鍵是textScaleFactor，代表字體縮放因子，是指每個邏輯像素對應的實際字體像素，例如如果textScaleFactor這個值是1.5，那么字體將會比指定的字體大小大50%

在Text.rich的實現(xiàn)中，最終構(gòu)建widget仍然是RichText:

其中textScaleFactor是這樣實現(xiàn)的：

textScaleFactor: textScaleFactor ?? MediaQuery.textScaleFactorOf(context),

如果傳來的參數(shù)為空，則去用mediaQuery查詢獲得。

而直接使用RichText時，默認的textScaleFactor為1，不會隨著系統(tǒng)字體設置而變化。

從Text.rich和RichText的構(gòu)造方式中也可以看出，Text.rich本身的實現(xiàn)也是調(diào)用RichText,不過有了更多默認屬性的設置，這就給開發(fā)帶來一些便利，特別是可以覆蓋開發(fā)考慮不到的屬性，因此在實際開發(fā)中，需要在Flutter中使用富文本時，開發(fā)中推薦使用Text.rich這種方式。

Flutter 中不同分辨率的圖片如何加載

1.說明：

我們都知道在使用 Android 原生開發(fā) app 的時候不同分辨率的圖片放置到下面對應的文件夾中：

但是使用 Flutter 開發(fā) app 時卻有不同，他們也有一個對應的關系，按照他們的對應關系建立文件夾就可以了，如下：

2.使用：

首先在 Flutter 項目根目錄中創(chuàng)建一個 images 文件夾用來存放圖片資源；

然后在項目目錄下找到 pubspec.yaml 文件打開，聲明圖片資源；

如何加載不同分辨率的圖呢，例如 android 中的 hdpi，xhdpi，xxhdpi 和 ios 中的 1x，2x，3x。只需要在 images 文件夾中在創(chuàng)建兩個 2.0x，3.0x 文件夾用來存放 2x，3x 的圖片資源：

如上圖，1.0x 圖片放到了 account 文件夾中，account 文件夾下又有 1.5x、2.0x、3.0x、4.0x 文件夾，分別存放對應分辨率的圖片，這里要注意文件夾的對應關系。

使用圖片時，只需要使用 account 文件夾下的圖片就行了，系統(tǒng)會根據(jù)手機的分辨率，加載對應文件夾中的圖片，如:

新聞名稱：flutter1.5,flutter 122
網(wǎng)頁網(wǎng)址：http://chinadenli.net/article4/dsephie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站改版、網(wǎng)站收錄、手機網(wǎng)站建設、虛擬主機、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)