關于Flutter的那些事兒

深入理解 flutter 布局約束 首先，

上層 widget 向下層 widget 傳遞約束條件；

然后，下層 widget 向上層 widget 傳遞大小信息。

最后，上層 widget 決定下層 widget 的位置。

更多細節：

Widget 會通過它的 父級 獲得自身的約束。約束實際上就是 4 個浮點類型的集合：最大/最小寬度，以及最大/最小高度。

然后，這個 widget 將會逐個遍歷它的 children 列表。向子級傳遞 約束（子級之間的約束可能會有所不同），然后詢問它的每一個子級需要用于布局的大小。

然后，這個 widget 就會對它子級的 children 逐個進行布局。（水平方向是 x 軸，豎直是 y 軸）

最后，widget 將會把它的大小信息向上傳遞至父 widget（包括其原始約束條件）。

了解如何為特定 widget 制定布局規則

掌握通用布局是非常重要的，但這還不夠。

應用一般規則時，每個 widget 都具有很大的自由度，所以沒有辦法只看 widget 的名稱就知道可能它長什么樣。

如果你嘗試推測，可能就會猜錯。除非你已閱讀 widget 的文檔或研究了其源代碼，否則你無法確切知道 widget 的行為。

布局源代碼通常很復雜，因此閱讀文檔是更好的選擇。但是當你在研究布局源代碼時，可以使用 IDE 的導航功能輕松找到它。

下面是一個例子：

在你的代碼中找到一個 Column 并跟進到它的源代碼。為此，請在 (Android Studio/IntelliJ) 中使用 command+B（macOS）或 control+B（Windows/Linux）。你將跳到 basic.dart 文件中。由于 Column 擴展了 Flex，請導航至 Flex 源代碼（也位于 basic.dart 中）。

向下滾動直到找到一個名為 createRenderObject() 的方法。如你所見，此方法返回一個 RenderFlex。它是 Column 的渲染對象，現在導航到 flex.dart 文件中的 RenderFlex 的源代碼。

向下滾動，直到找到 performLayout() 方法，由該方法執行列布局。

CSS

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。