日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

flutter 布局管理詳解

作者:朝陽39 更新時間: 2022-06-06 編程語言

布局原理

每個組件在渲染之前的布局過程具體可分為兩個線性過程。首先從組件頂部向下傳遞布局約束,然后從底部向上傳遞布局信息。
在這里插入圖片描述
這兩個線性過程會在元素樹所引用的RenderObject樹中完成,并且最終的布局信息將保存在RenderObject中。因此,當重新構建組件時,如果元素和RenderObject能夠復用,那么同樣可以使用和上次一樣的布局信息。這種單向傳遞和保存信息的方式是Flutter布局性能優于其他框架的重要原因之一。

RenderObject樹由一個個RenderObject組合而成。當Element實例掛載到元素樹上后,就會調用組件的createRenderObject()方法生成對應的RenderObject。由于RenderObject樹被元素樹引用,并且主要任務就是幫助Element實例做具體的渲染工作,因此RenderObject樹也常稱為元素樹的子樹。
在這里插入圖片描述
每個RenderObject會被元素持有,并且在組件重建后會盡量復用,每當元素中的狀態發生改變時,就會調用組件的updateRenderObject()方法更新渲染對象,屏幕上的值最終得以更新。

RenderObject類中提供了很多與布局密切相關的對象和方法,如下所示。

  • constraints對象,從父組件中傳遞過來的約束對象。
  • parentData對象,從子組件傳遞來的具體布局信息。
  • performLayout()方法,負責具體的布局邏輯。
  • paint方法,繪制組件和它的子組件。

RenderObject是一個抽象類,每種Element都會指向不同類型的渲染對象,繼承自RenderOject的兩個主要的類是RenderBox和RenderSliver,它們分別使用盒子協議和滑動協議來做布局工作。基于這兩個類,Flutter還提供了許多處理特定場景的渲染類,如RenderShiftedBox和RenderStack等。

布局約束 1 —— 盒子協議

box protocol 用于靜態布局

父節點傳遞給其子節點的約束是一個BoxConstraints對象。這種約束對象內部有4個屬性,分別用來規定每個子節點的最大和最小寬度與高度。這種約束會一直向下延伸,子組件也會產生約束,再傳遞給它下面的子組件,這個過程一直延續到組件樹最下面的葉子節點。

比如,父節點傳入了MinWidth=150像素,MaxWidth=350像素,MinHeight=100像素,MaxHeight=double.infinity(盡可能大)的BoxConstraints對象。
在這里插入圖片描述
子組件接收到這個約束后,便會根據BoxConstraints對象取得上圖中指定范圍內的值,即寬度介于150~350像素,高度大于或等于100像素。當取得具體的值之后,就會將值向上傳遞給父組件,父組件會根據這些信息確定子組件的位置,再對它做具體的布局操作,這樣就達到了父子組件間的布局通信。


組件接收到盒子布局約束后,會分3種情況設置寬度和高度:

  1. 盡可能大地擴展寬度和高度,即總是取布局約束的最大值,如Center、ListView組件
  2. 組件會盡量選擇最小值并與它的子組件(如Opacity)的最大寬度、高度相等。
  3. 像Text、Image這類屬于葉子節點的組件會以固定尺寸渲染。

自定義盒子布局約束

使用 ConstrainedBox 組件

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: 150.0,    // 最大寬度
    maxHeight: 70.0,    // 最大高度
  ),
  child: Container(
    color: Colors.lightBlue,
  ),
)

傳遞給子組件Container一個最大寬度為150.0像素、最大高度為70.0像素的盒子約束。由于Container在沒有子組件的情況下會根據布局約束盡可能大擴展寬度和高度,因此Container的寬度會自動設置為150像素,高度會自動設置為70像素。
在這里插入圖片描述

布局約束 2 —— 滑動協議

sliver protocol 用于滾動布局

滾動組件里的每個子組件都被定義為一個sliver組件,父組件傳遞的約束對象為SliverConstraints,該對象不僅記錄了視圖的滾動方向、遺留空間等信息,還為每個Sliver組件提供了它們在滾動布局中的偏移量。
在這里插入圖片描述
如上圖中的淺黃色的高亮組件,當偏移量為0像素時,在滾動布局邊緣完全展示出來。


所以,滾動布局中的組件分為3種:

  1. 當前顯示在布局中的組件
  2. 已經滾動出屏幕的組件
  3. 還未滾動到屏幕下方的組件。

原文鏈接:https://blog.csdn.net/weixin_41192489/article/details/124624267

欄目分類
最近更新