2020-05-15 flutter BoxConstraints and layout

在出現布局錯誤時能盡快找到錯誤原因。

創(chuàng)新互聯公司專注為客戶提供全方位的互聯網綜合服務，包含不限于成都網站設計、成都做網站、廣饒網絡推廣、重慶小程序開發(fā)、廣饒網絡營銷、廣饒企業(yè)策劃、廣饒品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯公司為所有大學生創(chuàng)業(yè)者提供廣饒建站搭建服務，24小時服務熱線：13518219792，官方網址：chinadenli.net

以下是對關鍵內容的翻譯和注解。

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

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

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

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

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

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

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

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

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

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

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

以下圖為Column布局實例。

給column布局進行了以下6步操作

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

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

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

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

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

設置子元素的位置，即設置靠左，靠右，居中，分散等，與本示例關系不大。

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

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

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

Flutter 屏幕適配 -- 百分比

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

文章地址 ： （自備扶梯）

本文核心思想 ：

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

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

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

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

具體 lp 有什么效果，網上也沒查到具體資料????

如何解決這個問題呢 ？

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

作者新建一個幫助類 ：

初始化方法 ：

使用幫助類來設置widget大小 ：

效果圖 ：

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

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

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

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

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

那我們就把屏幕寬和長 ，分成 1080 和 1920 個單位 ，然后按設計圖上的標注去填寫相應widgets的大小

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

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

在網上發(fā)現了一個開源庫 ，原理我覺得差不多，大家可以學習一下

flutter_screenutil

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

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

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

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

當direction的值為Axis.horizontal的時候，則是Row。

當direction的值為Axis.vertical的時候，則是Column。

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

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

示例1 - 基本使用

示例2 - 基線對齊

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

示例3 - 水平方向包裹

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

Column 基本使用 示例

再看一個示例

運行效果如下：

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

解釋：

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

運行效果如下：

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

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

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

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

pub

github

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

2、硬解碼

4、UI封裝： better_player

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

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

6、調用原生內核播放器：iOS--AVPlayer， Android--ExoPlayer

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

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

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

10、無網絡有緩存時，封面可以正常展示

11、better_player播放失敗有手動retry的設計

pub

github

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

2 、國內有QQ群，但是活躍度也是不高。

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

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

5、無網絡有緩存視頻時，無法展示封面，因為內部是通過imageProvider去加載網絡圖片的。

7、播放失敗無手動retry的設計

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

如何自己實現？

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

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

flutter 圖片壓縮

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

80就是壓縮比例，默認為100

Assets為獲取到的圖片類型

上傳的時候可以通過

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

用dio批量上傳

Flutter實踐--屏幕適配

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

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

默認寬1080px

默認高1920px

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

初始化單位為px

需要把context傳進去，因為內部是通過 MediaQuery 來獲取屏幕尺寸等相關信息的

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

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

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

初始化仍用px來初始化

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

flutter_screenutil為num類擴展了一系列簡寫方法，那我們當然可以按照它這種方式進行擴展

網上提供的解決方案：

第一步：修改 pubspec.yaml

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

第三步：重啟 AndroidStudio

解決方案：去掉const即可

UI設計中px、pt、ppi、dpi、dp、sp之間的關系

Dart/Flutter - 擴展方法(ExtensionMethod)

當前名稱：flutter比例,flutter 比較
網站地址：http://chinadenli.net/article9/dsepoih.html

成都網站建設公司_創(chuàng)新互聯，為您提供商城網站、響應式網站、品牌網站建設、外貿建站、App設計、動態(tài)網站

廣告

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