基礎組件

基礎 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 的整個空間

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容