flutter中常見的類
flutter中常見的類
- 佈局類
- Text （文字）
- Container (容器)
- Row、Column （橫向或縱向排列）
- Expanded (根據內容自動收縮)
- SizedBox (佔位元素)
- Image （存放圖片控制元件）
- (讀取圖片)
- RaisedButton （按鈕）
- FlatButton （右下角按鈕）
- TextField （輸入框）
- RotatedBox （提供旋轉的容器）
- Switch （開關）
- Icon （圖示）
- ListView （列表）
- showDialog （彈框）
- Form （表單）
- TextFormField （表單中的組合輸入框）
- Flex ( 橫向排列 )
- GridView ( 組合排列 )
- RefreshIndicator (重新整理控制元件)
佈局類
Text （文字）
屬性
{ data }：（String）
顯示的文字
maxLines：（int）
文字顯示的最大行數，可配合overflow使用 （相當於line-clamp）
overflow: （TextOverflow）
文字溢位處理
TextOverflow.clip
不顯示後面文字
TextOverflow.ellipsis 省略號表示
TextOverflow.fade
最後一行文字下方會有漸變隱藏效果
style：（TextStyle）
文字的樣式，封裝在TextStyle類中，包含color, fontSize,fontStyle等。
textAlign：（TextAlign）
文字如何排列，有TextAlign.center, TextAlign.end等
textScaleFactor：（double）
文字縮放比例，預設大小1.0
textSpan：（TextSpan）
和TextSpan控制元件一樣，屬於富文字元素，如果有值，則該值為空
Container (容器)
類似於div，用於約束內部的控制元件
屬性
child：（Widget）
被約束的子元素
alignment：（Alignment）
內部的對齊方式，例如：Alignment.center、Alignment.bottomRight等
margin、padding：（EdgeInsets）
佈局屬性
decoration：（BoxDecoration）（有這個屬性就不能存在color屬性，可以在內部定義color）
元素裝飾器，例如：image(背景圖片)、border、borderRadius( 例如值為BorderRadius.all(Radius.circular(10)) )、boxShadow、gradient（漸變色，會取代boxShadow.color）等
foregroundDecoration：（BoxDecoration）
在子元素前的裝飾元素，類似於::before
Row、Column （橫向或縱向排列）
（有限的空間）
Row：在父控制元件中水平排列
Column：在父控制元件中縱向排列
屬性
children：list(Widget)
排列的子元素集合
mainAxisAlignment：(MainAxisAlignment)
子元素在主軸方向排列
Row: X軸
Column: Y軸
crossAxisAlignment：(CrossAxisAlignment)
子元素在垂直軸方向排列
Row: Y軸
Column: X軸
TextDirection：(TextDirection)
子元素的X軸的配列順序（好像只對Row有效，從左至右或從右至左）
TextDirection：(TextDirection)
子元素的Y軸的配列順序發生變化，並且整個內容也會在頂部或底部（好像只對Cloumn有效）
mainAxisSize：(MainAxisSize)
容器在主軸的佔用空間（
max: 佔用最大，能撐起容器
min：佔用最小，能撐起內容））
Expanded (根據內容自動收縮)
可以在Row、Column或Flex的繼承類中使用，可以使元素充分填充可用的空間，防止內容溢位。
child: (Widget)
內容控制元件
flex：(int)
如果為非0，則表示該元素是flex父級控制元件元素的幾份。
SizedBox (佔位元素)
可以定義個寬高的佔位元素
height、width：(double)
元素的高寬，如果是空則為child元素的高寬
child: (Widget)
內部的元素，可以為空
Image （存放圖片控制元件）
圖片控制元件
構造方法
| 構造方法 | 含義 | ImageProvider |
|---|---|---|
| Image | 基本建構函式 | |
| Image.asset | 本地圖片的路徑 | 定義了scale -> ExactAssetImage 沒定義scale -> AssetImage |
| Image.file | 使用檔案File圖片 | FileImage |
| Image.memory | 從快取中讀取資料 | MemoryImage |
| Image.network | 載入網路圖片 | NetworkImage |
ImageProvider用來標識定點陣圖片，監聽圖片流獲取資源。支援絕大部分圖片格式。
屬性
alignment：(AlignmentGeometry)
定義圖片的對齊方式，僅在圖片大小不等於父容器的大小情況下有效
color: (Color)
圖片的覆蓋顏色
fit: (BoxFit)
| 方法 | 圖片 |
|---|---|
| BoxFit.contain（預設） |  |
| BoxFit.cover |  |
| BoxFit.fill |  |
| BoxFit.fitHeight |  |
| BoxFit.fitWidth |  |
| BoxFit.none |  |
| BoxFit.scaleDown |  |
gaplessPlayback: (bool)
當圖片地址改變的時候是否重新載入圖片，在圖片是個變數的時候需要用到
repeat: (ImageRepeat)
在父容器中剩餘空間中重複顯示的方式