flutter學習 布局

2022-03-23 09:46:53 字數 3306 閱讀 9746

名稱

型別說明

scrolldirection

axis

axis.horizontal、axis.vertical

padding

edgeinsetsgeometry

內邊距resolve

bool

元件反向排序

children

list

列表元素

listview.builder( itemcount:this.list.length, 		itembuilder:(context,index)"), 

); },);

示例:

listtile( 

leading:icon(icons.phone), title:text("listtitle",style:textstyle(fontsize:28.0),

), subtitle:text('subtitle'),

trailing:icon(icons.phone),

),

名稱

型別說明

scrolldirectioin

axis

滾動方向

padding

edgeinsetsgeometry

內邊距resolve

bool

元件反向排序

crossaxisspacing

double

水平間距

mainaxisspacing

double

垂直間距

crossaxiscount

int一行的數量

childaspectratio

double

子widge寬高比

children

class layoutcontent extends statelesswidget);  

return templist.tolist();

}@override widgetbuild(buildcontextcontext)

class layoutcontent extends statelesswidget

@override

widgetbuild(buildcontextcontext)

在 html 中常見的布局標籤都有 padding 屬性,但是 flutter 中很多 widget 是沒有 padding 屬 性。這個時候我們可以用 padding 元件處理容器與子元素直接的間距。

屬性型別

說明padding

edgeinsetss

邊距值child

widget

子元件屬性

型別說明

mainaxisalignment

mainaxisalignment

主軸的排序方式

crossaxisalignment

crossaxisalignment

次軸的排序方式

children

元件子元素

屬性型別

說明mainaxisalignment

mainaxisalignment

主軸的排序方式

crossaxisalignment

crossaxisalignment

次軸的排序方式

children

元件子元素

屬性型別

說明flex

number

元素佔整個父row/column的比例

child

widget

子元素stack 表示堆的意思,我們可以用 stack 或者 stack 結合 align 或者 stack 結合 positiond 來實 現頁面的定位布局

屬性型別

說明alignment

alignment

配置所有元素的顯示位置

children

widget

子元件stack 元件中結合 align 元件可以控制每個子元素的顯示位置

屬性型別

說明alignment

alignment

配置所有子元素的顯示位置

child

widget

子元件stack 元件中結合 positioned 元件也可以控制每個子元素的顯示位置

屬性型別

說明top

number

子元素距離頂部的距離

bottom

number

子元素距離底部的距離

left

number

子元素距離左側的距離

right

number

子元素距離右側的距離

child

widget

子元件​ aspectratio 的作用是根據設定調整子元素 child 的寬高比。

​ aspectratio 首先會在布局限制條件允許的範圍內盡可能的擴充套件,widget 的高度是由寬 度和比率決定的,類似於 boxfit 中的 contain,按照固定比率去盡量佔滿區域。

​ 如果在滿足所有限制條件過後無法找到乙個可行的尺寸,aspectratio 最終將會去優先 適應布局限制條件,而忽略所設定的比率。

屬性型別

說明aspectratio

double

寬高比child

widget

子元件屬性

型別說明

margin

edgeinserts

外邊距child

widget

子元件shape

shape

卡片的陰影效果,預設陰影效果為圓角的長方形邊

​ wrap 可以實現流布局,單行的 wrap 跟 row 表現幾乎一致,單列的 wrap 則跟 row 表 現幾乎一致。但 row 與 column 都是單行單列的,wrap 則突破了這個限制,mainaxis 上空 間不足時,則向 crossaxis 上去擴充套件顯示。

屬性說明

direction

主軸的方向,預設水平

alignment

主軸的對方式

spacing

主軸方向上的間距

textdirection

文字方向

verticaldirection

children擺放舒徐,預設是down

runalignment

run的對齊方式

runspacing

run的間距

flutter 之 布局學習

flutter 中的布局常用的有 container row column static 等 有了這些 基本上都能搭配出不同的ui介面了 今天來逐一介紹 container flutter 中的uiview class layoutdemo extends statelesswidget 如上 會顯...

Flutter學習之縱向布局

import package flutter material.dart void main class columns extends statelesswidget 縱向布局也就是以縱軸為主軸 mainaxisalignment 橫軸為輔助軸 crossaxisalignment 進行布局,然後...

Flutter學習之縱向布局

import package flutter material.dart void main class columns extends statelesswidget 縱向布局也就是以縱軸為主軸 mainaxisalignment 橫軸為輔助軸 crossaxisalignment 進行布局,然後...