基礎(chǔ) widget
01十偶、Text單一格式的文本
RichText:一個富文本Text,可以顯示多種樣式的text园细。
富文本顯示惦积。結(jié)合TextSpan組件一起使用
02、 Row, Column
可以讓你在水平 ( Row ) 和垂直( Column ) 方向創(chuàng)建靈活的布局
row是橫向分布的猛频,那所有的元素就是沿著一條橫著的主軸排列的狮崩,默認(rèn)情況下,它們將整個軸布滿鹿寻,而軸一般來說是跟屏幕同寬或者同長睦柴,跟上一個案例一樣。但是可以通過mainAxisSize設(shè)置軸的長度毡熏、mainAxisAlignment設(shè)置對齊關(guān)系坦敌、使用CrossAxisAlignment設(shè)置children在橫軸中的定位 。column同理痢法。
Column?不支持滾動狱窘,想支持滾動,需要考慮使用ListView
在Row 和 Column 里CrossAxis 和 Main Axis 是不一樣的
Row 布局 設(shè)置??crossAxisAlignment?無效
Column 布局 設(shè)置??mainAxisAlignment?無效
03财搁、Expanded
Expanded widget 能夠包裹一個 widget 并強(qiáng)制其填滿剩余空間蘸炸,與 Flexible 非常相似。
Expanded必須要要結(jié)合Column或者Row一起使用妇拯,否則會報錯幻馁。作用是動態(tài)調(diào)整 child 組件沿主軸的尺寸,比如填充剩余空間越锈,比如設(shè)置尺寸比例仗嗦。
04、SizedBox
這個可以用來調(diào)整大小甘凭,也可以用來創(chuàng)造空間稀拐。
與Container類似,但僅用于設(shè)置容器的寬高丹弱,如果需要設(shè)置背景色等德撬,請使用Container
05铲咨、Spacer
如果要造空位,Spacer比樓上更合適一點(diǎn)蜓洪,它可以用flex纤勒,且放在children中效果優(yōu)先級高于mainAxisAlignment。
06隆檀、
icon
優(yōu)勢:
尺寸不管怎么變摇天,圖標(biāo)本身都是清晰的,且沒有鋸齒,
可以修改顏色:
還支持傳入圖片 (icon: 'images/icon.png')
缺點(diǎn):只能設(shè)置純色恐仑,不能設(shè)置漸變色
Image
在放圖片前先配置下泉坐。先創(chuàng)建assets文件夾,并補(bǔ)上倆子文件夾用于存放圖標(biāo)和圖片裳仆;再將這倆文件夾寫入
pubspec.yaml里腕让。
Image.network
Image.asset
繼承了ImageProvider的image加載組件
本地AssetImage
AssetImage('images/image_icon.png')
網(wǎng)絡(luò)圖:NetworkImage
NetworkImage('imageUrl')
文件中加載:Image.file
內(nèi)存中加載:Image.memory
07、 Container
在沒有限制的情況下歧斟,Container 大小會盡可能大纯丸,如果沒有 height 的限制,這個 Container 將布滿屏幕构捡。
Container 需要遵守對齊方式液南,根據(jù)子項(xiàng)調(diào)整大小,尊重寬度勾徽、高度和約束滑凉,擴(kuò)展以適合父項(xiàng),盡可能小喘帚。
如果 widget 沒有子項(xiàng)且沒有對齊方式畅姊,但提供了高度、寬度或約束吹由,Container 會嘗試盡可能小若未,給定這些約束和父約束的組合。
08倾鲫、 GridView
ListView
09粗合、Stack
Stack 是定死的,不能像之前 ListView, Container 那樣可以在內(nèi)容數(shù)據(jù)溢出時可滾動乌昔。
可以剪切掉超出渲染框的子項(xiàng)隙疚,所以才有上面圓形頭像的操作。
Stack:取代線性布局 (和Android中的LinearLayout相似)磕道,Stack允許子 widget 堆疊供屉, 你可以使用?Positioned?來定位他們相對于Stack的上下左右四條邊的位置。
010、
RaisedButton 點(diǎn)擊帶波紋效果伶丐,且有陰影
FloatButton: 沒有背景
OutlineButton: 帶邊框按鈕,點(diǎn)擊時邊框和背景顏色呈現(xiàn)高亮狀態(tài)
FloatingActionButton:一般一個界面只有一個悼做,用于分享,導(dǎo)航
TextButton是Flutter中的一個按鈕組件哗魂,它用于創(chuàng)建一個簡單的文本按鈕肛走,通常用于觸發(fā)次要操作。TextButton是MaterialButton的一個子類录别,因此它遵循材質(zhì)設(shè)計規(guī)范羹与,并提供一些常見的按鈕屬性。
011庶灿、
Divider:一個邏輯1像素厚的水平分割線,兩邊都有填充
012吃衅、
Padding:一個widget, 會給其子widget添加指定的填充往踢,設(shè)置內(nèi)邊距
Center:將其子widget居中顯示在自身內(nèi)部的widget
ConstrainedBox:對其子項(xiàng)施加附加約束的widget
Offstage:一個布局widget,可以控制其子widget的顯示和隱藏徘层。
013峻呕、
Scaffold
快速搭建頁面框架的組件
014、Positioned絕對定位趣效,一般跟Stack組件配合一起使用
Positioned.fill方法將填充 Stack 的整個空間