基礎 widget
01、Text單一格式的文本
RichText:一個富文本Text,可以顯示多種樣式的text。
富文本顯示。結合TextSpan組件一起使用
02、 Row, Column
可以讓你在水平 ( Row ) 和垂直( Column ) 方向創建靈活的布局
row是橫向分布的,那所有的元素就是沿著一條橫著的主軸排列的,默認情況下,它們將整個軸布滿,而軸一般來說是跟屏幕同寬或者同長,跟上一個案例一樣。但是可以通過mainAxisSize設置軸的長度、mainAxisAlignment設置對齊關系、使用CrossAxisAlignment設置children在橫軸中的定位 。column同理。
Column?不支持滾動,想支持滾動,需要考慮使用ListView
在Row 和 Column 里CrossAxis 和 Main Axis 是不一樣的
Row 布局 設置??crossAxisAlignment?無效
Column 布局 設置??mainAxisAlignment?無效
03、Expanded
Expanded widget 能夠包裹一個 widget 并強制其填滿剩余空間,與 Flexible 非常相似。
Expanded必須要要結合Column或者Row一起使用,否則會報錯。作用是動態調整 child 組件沿主軸的尺寸,比如填充剩余空間,比如設置尺寸比例。
04、SizedBox
這個可以用來調整大小,也可以用來創造空間。
與Container類似,但僅用于設置容器的寬高,如果需要設置背景色等,請使用Container
05、Spacer
如果要造空位,Spacer比樓上更合適一點,它可以用flex,且放在children中效果優先級高于mainAxisAlignment。
06、
icon
優勢:
尺寸不管怎么變,圖標本身都是清晰的,且沒有鋸齒,
可以修改顏色:
還支持傳入圖片 (icon: 'images/icon.png')
缺點:只能設置純色,不能設置漸變色
Image
在放圖片前先配置下。先創建assets文件夾,并補上倆子文件夾用于存放圖標和圖片;再將這倆文件夾寫入
pubspec.yaml里。
Image.network
Image.asset
繼承了ImageProvider的image加載組件
本地AssetImage
AssetImage('images/image_icon.png')
網絡圖:NetworkImage
NetworkImage('imageUrl')
文件中加載:Image.file
內存中加載:Image.memory
07、 Container
在沒有限制的情況下,Container 大小會盡可能大,如果沒有 height 的限制,這個 Container 將布滿屏幕。
Container 需要遵守對齊方式,根據子項調整大小,尊重寬度、高度和約束,擴展以適合父項,盡可能小。
如果 widget 沒有子項且沒有對齊方式,但提供了高度、寬度或約束,Container 會嘗試盡可能小,給定這些約束和父約束的組合。
08、 GridView
ListView
09、Stack
Stack 是定死的,不能像之前 ListView, Container 那樣可以在內容數據溢出時可滾動。
可以剪切掉超出渲染框的子項,所以才有上面圓形頭像的操作。
Stack:取代線性布局 (和Android中的LinearLayout相似),Stack允許子 widget 堆疊, 你可以使用?Positioned?來定位他們相對于Stack的上下左右四條邊的位置。
010、
RaisedButton 點擊帶波紋效果,且有陰影
FloatButton: 沒有背景
OutlineButton: 帶邊框按鈕,點擊時邊框和背景顏色呈現高亮狀態
FloatingActionButton:一般一個界面只有一個,用于分享,導航
TextButton是Flutter中的一個按鈕組件,它用于創建一個簡單的文本按鈕,通常用于觸發次要操作。TextButton是MaterialButton的一個子類,因此它遵循材質設計規范,并提供一些常見的按鈕屬性。
011、
Divider:一個邏輯1像素厚的水平分割線,兩邊都有填充
012、
Padding:一個widget, 會給其子widget添加指定的填充,設置內邊距
Center:將其子widget居中顯示在自身內部的widget
ConstrainedBox:對其子項施加附加約束的widget
Offstage:一個布局widget,可以控制其子widget的顯示和隱藏。
013、
Scaffold
快速搭建頁面框架的組件
014、Positioned絕對定位,一般跟Stack組件配合一起使用
Positioned.fill方法將填充 Stack 的整個空間