名稱
型別說明
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 進行布局,然後...