flutter 圖片壓縮

原以為很難的東西，東找找西找找，只有一個魯班壓縮，但都不怎么維護(hù)狀態(tài)最終找到好的辦法，可以通過multi_image_picker庫的二進(jìn)制壓縮

成都創(chuàng)新互聯(lián)公司客戶idc服務(wù)中心，提供溫江服務(wù)器租用、成都服務(wù)器、成都主機托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價的產(chǎn)品以及開放、透明、穩(wěn)定、高性價比的服務(wù)，資深網(wǎng)絡(luò)工程師在機房提供7*24小時標(biāo)準(zhǔn)級技術(shù)保障。

80就是壓縮比例，默認(rèn)為100

Assets為獲取到的圖片類型

上傳的時候可以通過

multiImages就是存放Assets類型的圖片數(shù)組，然后通過for循環(huán)遍歷來批量添加圖片

用dio批量上傳

Flutter實踐--屏幕適配

做移動端開發(fā)的小伙伴都知道，針對不同型號和尺寸的手機要進(jìn)行頁面適配，且Android和iOS適配方案各不相同，那flutter端如何進(jìn)行適配呢？以下為近期flutter開發(fā)過程中關(guān)于適配的一些學(xué)習(xí)和記錄~~~~

說到flutter屏幕適配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不說以下幾點????

默認(rèn)寬1080px

默認(rèn)高1920px

allowFontScaling為false，即不跟隨系統(tǒng)字體大小設(shè)置變化

初始化單位為px

需要把context傳進(jìn)去，因為內(nèi)部是通過 MediaQuery 來獲取屏幕尺寸等相關(guān)信息的

無需再傳context，因為內(nèi)部是通過單例 window 來獲取屏幕尺寸等相關(guān)信息的

作為iOS開發(fā)，之前都是以pt為參照進(jìn)行比例適配的，且架構(gòu)組已經(jīng)定義了一套適配相關(guān)常量，傳px進(jìn)去不太方便，所以需要對flutter_screenutil進(jìn)行擴展

公司設(shè)計圖是以iPhone X的尺寸提供的即物理設(shè)備尺寸為375x812，像素比例為750x1624,像素密度比為2

初始化仍用px來初始化

dart sdk 2.7正式支持 extension-method ，即為已有類擴展方法，從 flutter_screenutil 這種 540.w 寫法點進(jìn)去，我們可以看到

flutter_screenutil為num類擴展了一系列簡寫方法，那我們當(dāng)然可以按照它這種方式進(jìn)行擴展

網(wǎng)上提供的解決方案：

第一步：修改 pubspec.yaml

第二步：執(zhí)行 flutter pub get

第三步：重啟 AndroidStudio

解決方案：去掉const即可

UI設(shè)計中px、pt、ppi、dpi、dp、sp之間的關(guān)系

Dart/Flutter - 擴展方法(ExtensionMethod)

2020-05-15 flutter BoxConstraints and layout

在出現(xiàn)布局錯誤時能盡快找到錯誤原因。

以下是對關(guān)鍵內(nèi)容的翻譯和注解。

flutter的布局模型是“一步布局模型”（one-pass layout model），在渲染樹中，向下treewalk傳遞給子 盒約束，然后再向上treewalk將計算好的幾何形狀(比如高度、寬度等)傳遞給父。我理解one-pass layout model就是一遍就將布局計算好。不會多次treewalk去計算布局，或多次重繪(repaint)并多次計算布局。

計算的好的幾何形狀必須符合盒約束的要求。

盒約束有四個值，minWidth,maxWidth,minHeight,maxHeight，符合盒約束的意思就是說 計算出的寬高必須在最大值和最小值之間 。

我猜測，在將盒約束向子傳遞的過程中，子會根據(jù)父的盒約束，設(shè)置自己的盒約束，而不是單純的繼承父的盒約束。稍后結(jié)合Flex布局可以解釋。

盒約束的最小值和最大值相等。因此在tight約束下的子的高寬將等于父的高寬，也就是說子是緊緊(tight)貼著父的。

盒約束的最小值為0，也就是說子可以是小于盒約束最大值的任何值，也就是說子是不緊貼(松的，loose)父的。

盒約束的最大值不是infinite(無窮大)

盒約束的最大值是infinite(無窮大)

盒約束的最小值是infinite(無窮大)，他的子的寬或高只能取無窮大。

子的寬高(Size)符合盒約束的要求。

以下摘抄原文檔并翻譯，并加以分析。為了關(guān)注要點， 忽略crossAxis方向(水平方向)的處理 。

以下圖為Column布局實例。

給column布局進(jìn)行了以下6步操作

首先給每個非flex子元素，設(shè)置豎直方向unbounded(無界)的盒約束。結(jié)合圖片，也就是將1、2兩個子設(shè)置好豎直方向無界的盒約束。示例中1和2設(shè)置了高度，因此一共占用高度是5+3=8.

按flex的比例給flex元素分配剩余的空間。因為示例只有一個flex元素，即3號元素，因此將占有剩余全部空間，高度是20-5-3 = 12。

在第二步中分配好空間的flex元素，給他設(shè)置的盒約束不是豎直方向unbounded(給非flex元素設(shè)置的是豎直方向unbounded)，而是有界的盒約束，盒約束的maxHeight是12，即第二步中被分配的高度。

水平方向不解釋了。高度設(shè)置完了他去設(shè)置寬度。

Column組件的總高度是由mainAxisSize屬性決定的，如果值是MainAxisSize.max，Column的高度就是Column的盒約束的maxHeight值，示例中我們給Column設(shè)置了高度為20的bounded盒約束，假設(shè)Column.mainAxisSize=MainAxisSize.max,那么Column的高度就是20.如果mainAxisSize=MainAxisSize.min，Column的高度將由其子元素的高度和決定。假設(shè)3號flex元素不設(shè)置成flex元素，而是固定高度為8，那么Column的高度就是5+3+8=16.

設(shè)置子元素的位置，即設(shè)置靠左，靠右，居中，分散等，與本示例關(guān)系不大。

根據(jù)第一步，inner column被outer column設(shè)置了無界(unbounded)的盒約束，Column會緊包children，而inner column的Expanded要撐開以占用inner column的剩余空間，這就沖突了。

解決方案:給inner column設(shè)置有界的盒約束即可。比如給inner column外包一層有高度的Container。

下面這種方案，給inner column包一層Expanded也可以，是因為在outer column中，Expanded會被設(shè)置成有界的盒約束(結(jié)合第三步)，因此Expanded就可以向外擴展(expand)了。

Flutter開發(fā)--視頻播放器

目前Flutter平臺主流的兩個播放器是video_player和fijkplayer

pub

github

1、Flutter平臺官方插件，作者是國外的，有問題溝通比較困難，只能通過提交issue

2、硬解碼

4、UI封裝： better_player

基于video_player和Chewie的高級視頻播放器。它解決了許多典型的用例，并且易于運行。

5、播放器寬高比例與視頻內(nèi)容寬高比例不一致時，會出現(xiàn)圖像壓縮變形的問題

6、調(diào)用原生內(nèi)核播放器：iOS--AVPlayer， Android--ExoPlayer

7、對于分段源 m3u8 的播放不友好，如果一個切片播放超時，會導(dǎo)致整個播放都失敗

8、better_player可以緩存視頻，但不能自定義緩存的地址，只能指定key，和緩存的最大內(nèi)存量（還未研究超出最大的話是不能緩存新的，還是刪除最舊的）

9、better_player不能完全自定義UI，只能修改類中的一些開放屬性，比如說icon圖標(biāo)，文字顏色啥的

10、無網(wǎng)絡(luò)有緩存時，封面可以正常展示

11、better_player播放失敗有手動retry的設(shè)計

pub

github

1、fijkplayer 是一個 Flutter 生態(tài)的媒體播放器，是對 ijkplayer 的 Flutter 封裝，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作為播放器內(nèi)核，ijkplayer 使用 ffmpeg 進(jìn)行音視頻解封裝和解碼，同時添加了 Android 和 iOS 平臺特有的硬件加速解碼能力。

2 、國內(nèi)有QQ群，但是活躍度也是不高。

3、可以緩存視頻，可以自定義緩存的地址，方便后續(xù)的內(nèi)存維護(hù)。

4、可以通過FijkPanelWidgetBuilder較大程度上自定義UI。

5、無網(wǎng)絡(luò)有緩存視頻時，無法展示封面，因為內(nèi)部是通過imageProvider去加載網(wǎng)絡(luò)圖片的。

7、播放失敗無手動retry的設(shè)計

1、兩種播放器都是通過外接紋理方案 (Texture)，將播放器視頻畫面渲染接入 flutter 中，性能上優(yōu)于 PlatformView 的接入方法。

如何自己實現(xiàn)？

下面以video_palyer的iOS源碼部分解釋：

iOS用CVPixelBufferRef將渲染出來的數(shù)據(jù)存在內(nèi)存中，F(xiàn)lutter engine會將Texture的數(shù)據(jù)在內(nèi)存中直接進(jìn)行映射無需通過Channel傳輸，然后Texture Widget就可以把你提供的這些數(shù)據(jù)顯示出來。在我們傳輸數(shù)據(jù)的時候會需要將其與 TextureID 綁定，綁定的過程通過BasicMessageChannel實現(xiàn)數(shù)據(jù)流的傳輸，以做到實時展示的效果

Flutter 屏幕適配 -- 百分比

本文是根據(jù) Daniele Cambi 的文章 Flutter — Effectively scale UI according to different screen sizes 總結(jié)而來 ：

文章地址 ： （自備扶梯）

本文核心思想 ：

作者創(chuàng)建一個矩形 ：

在iPhone 5s (4" Display) and on an iPhone XS Max (6,46" Display)，

顯示效果的差異 ！！！ 如何解決這個問題呢 ？

注： Flutter 使用的 邏輯像素 logical pixels 為單位 ，和 Android的 dp還是不一樣

具體 lp 有什么效果，網(wǎng)上也沒查到具體資料????

如何解決這個問題呢 ？

作者認(rèn)為可以把屏幕認(rèn)為是一個 ， 100 * 100 的格子（或者認(rèn)為水平方向和豎直方向，平均分成100個單位 ，恩 ，是不是就是Android中的百分比布局了）

作者新建一個幫助類 ：

初始化方法 ：

使用幫助類來設(shè)置widget大小 ：

效果圖 ：

在Flutter中有一個非常方便的小部件，可以有效地處理這些問題，它被稱為“安全區(qū)域”( SafeArea)。

個人理解，flutter , 把 異形屏 ，導(dǎo)航欄相關(guān)區(qū)域稱為 安全區(qū)域 。

作者的思想 ：屏幕的長寬去掉安全區(qū)域的大小，然后分成 100份 ，算出每一塊的單位長度 。

我們可以使用 SizeConfig.safeBlockHorizontal or SizeConfig.safeBlockVertical為單位 ，對文字進(jìn)行縮放 。

真實的軟件開發(fā)過程，一般是設(shè)計人員先設(shè)計好設(shè)計圖 or 設(shè)計稿（一般是1080px * 1920px為基準(zhǔn)），然后研發(fā)人員進(jìn)行開發(fā)

那我們就把屏幕寬和長 ，分成 1080 和 1920 個單位 ，然后按設(shè)計圖上的標(biāo)注去填寫相應(yīng)widgets的大小

所以我認(rèn)為 flutter 非常適合百分比布局（天生適合按比例布局）

而Android 百分比布局，適配工作量非常大，兼容性差

在網(wǎng)上發(fā)現(xiàn)了一個開源庫 ，原理我覺得差不多，大家可以學(xué)習(xí)一下

flutter_screenutil

如果覺得文章有用，幫忙點個喜歡?? ，????????????

Flutter 之 彈性布局 (Row、Column) (十一)

彈性布局允許子組件按照一定比例來分配父容器空間

Flex組件和Row、Column屬性主要的區(qū)別就是多一個direction。

當(dāng)direction的值為Axis.horizontal的時候，則是Row。

當(dāng)direction的值為Axis.vertical的時候，則是Column。

它們之中都有主軸（MainAxis）和交叉軸（CrossAxis）的概念：

Row可以沿水平方向排列其子widget。定義如下：

示例1 - 基本使用

示例2 - 基線對齊

基線是英文字母X的下端兩點連成的一條線

示例3 - 水平方向包裹

Column可以沿垂直方向排列其子widget。定義如下：

Column 基本使用 示例

再看一個示例

運行效果如下：

我們發(fā)現(xiàn)文本并沒有居中？

解釋：

實際上，Row和Column都只會在主軸方向占用盡可能大的空間，而交叉軸的長度則取決于他們最大子元素的長度。如果我們想讓本例中的兩個文本控件在整個手機屏幕中間對齊，我們有兩種方法：

運行效果如下：

如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有最外面的Row或Column會占用盡可能大的空間，里面Row或Column所占用的空間為實際大小，下面以Column為例說明

如果要讓里面的Column占滿外部Column，可以使用Expanded 組件：

當(dāng)前名稱：flutter比例,flatter和flutter
標(biāo)題網(wǎng)址：http://chinadenli.net/article46/dsgdjhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、小程序開發(fā)、全網(wǎng)營銷推廣、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(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)