布局元件是指包含乙個或多個子元件的元件,不同的布局元件對子元件的排列方式不同。
在前面的文章有提到,element
樹才是最終的繪製樹,它是由widget
樹來建立的,widget
只是element
的配置資料。在flutter
中,根據widget
是否需要包含子節點將widget
分為三類,分別對應三種element
:
widget
對應的 element
用途leadrenderobjectwidget
leafrenderobjectelement
widget
樹的子節點,用於沒有子節點的widget
singlechildrenderobjectwidget
singlechildrenderobjectelement
包含乙個子widget
multichildrenderobjectwidget
multichildrenderobjectelement
包含多個子widget
,一般都有乙個children
引數,接受乙個widget
陣列
布局元件就是指直接或間接繼承multichildrenderobjectwidget
的widget
,然而multichildrenderobjectwidget
繼承自renderobjectwidget
。
renderobjectwidget
類中定義了建立、更新的方法,子類必須實現他們,它是布局元件的核心。
(筆者能力有限,更多的細節往後再更新)
Flutter 基礎篇(十三) 彈性布局
彈性布局,不是flutter特有的一種布局方式,在前端的各個領域中都存在,比如瀏覽器端通過flex來實現彈性布局。在flutter中,主要通過flex和expanded來實現彈性布局。flex元件可以沿著水平或垂直方向排列的子元件,如果你明確了主軸的方向,那麼更加應該使用row或column來代替f...
Flutter 基礎篇(十四) 流式布局
在前面討論到的所有布局容器裡面,都沒有考慮元素溢位的問題,比如 row children text jonas 100 顯然,一行肯定無法顯示下這麼長的文字,然而,row給出的處理方式是 丟擲錯誤!flex row column都存在這樣的問題,所以,如果需要考慮溢位場景的時候,應該使用流式布局元件...
Flutter 基礎篇(五) Text 元件
text元件用於顯示簡單樣式文字,它包含一些控制文字顯示的屬性。其中,它有乙個必須的引數,就是文字字串。void main override widget build buildcontext context 執行結果,在螢幕 顯示了jonas。除此以外,常用的屬性還有 textalign.left...