06 布局管理

2022-06-22 04:36:11 字數 1064 閱讀 6909

層疊布局和web中的絕對定位、android中的frame布局是相似的,子widget可以根據到父容器四個角的位置來確定本身的位置。絕對定位允許子widget堆疊(按照**中宣告的順序)。flutter中使用stack和positioned來實現絕對定位,stack允許子widget堆疊,而positioned可以給子widget定位(根據stack的四個角)。

stack()
const positioned()
彈性布局允許子widget按照一定比例來分配父容器空間,彈性布局的概念在其ui系統中也都存在,如h5中的彈性盒子布局,android中的flexboxlayout。

flex可以沿著水平或垂直方向排列子widget,如果你知道主軸方向,使用row或column會方便一些,因為row和column都繼承自flex,引數基本相同,所以能使用flex的地方一定可以使用row或column。flex本身功能是很強大的,它也可以和expanded配合實現彈性布局。

flex()
可以按比例「擴伸」row、column和flex子widget所占用的空間。

const expanded()
flex為彈性係數,如果為0或null,則child是沒有彈性的,即不會被擴伸占用的空間。如果大於0,所有的expanded按照其flex的比例來分割主軸的全部空閒空間。

row可以在水平方向排列其子widget。定義如下:

row()
column可以在垂直方向排列其子widget。引數和row一樣,不同的是布局方向為垂直,主軸縱軸正好相反。

在介紹row和colum時,如果子widget超出螢幕範圍,則會報溢位錯誤,使用wrap後溢位部分則會自動折行。下面是wrap的定義:

wrap()
我們可以看到wrap的很多屬性在row(包括flex和column)中也有,可以認為wrap和flex(包括row和column)除了超出顯示範圍後wrap會折行外,其它行為基本相同。下面我們看一下wrap特有的幾個屬性:

Android入門筆記 06 布局

android的五大布局分別是linearlayout 線性布局 framelayout 單幀布局 relativelayout 相對布局 absolutelayout 絕對布局 和tablelayout 布局 1 linearlayout 分為水平和垂直.通過 android orientatio...

CSS06 彈性布局

彈性布局 一種布局方式,主要解決某個元素中子元素的布局方式 父元素設定了display flex,讓所有子元素變成彈性布局 彈性布局的相關概念 1 容器 設定了display flex的元素,稱為容器 容器本身不是彈性布局.2 專案 真正發生彈性布局的子元素們稱為專案 3 主軸 4條 專案們排列方向...

CSS 06 彈性布局

1 彈性布局 彈性布局 一種布局方式,主要解決某個元素中子元素的布局方式 父元素設定了display flex,讓所有子元素變成彈性布局 彈性布局的相關概念 1 容器 設定了display flex的元素,稱為容器 容器本身不是彈性布局.2 專案 真正發生彈性布局的子元素們稱為專案 3 主軸 4條 ...