組件1：MaterialApp、Container晕鹊、Text松却、Image、Icon
組件2：ListView溅话、GridView
組件3：Padding晓锻、Row 、Column飞几、Stack砚哆、Align、Positioned
組件4：AspectRatio屑墨、Row 躁锁、Button
組件5：Wrap纷铣、StatelessWidget 、StatefulWidget战转、Dialog搜立、PageView、TextField
3. Widgets介紹
3.1 MaterialApp
Flutter 提供了許多 widget槐秧，可幫助你構(gòu)建遵循 Material Design 的應(yīng)用啄踊。 Material 應(yīng)用以 MaterialApp widget 開始，它在你的應(yīng)用的底層下構(gòu)建了許多有用的 widget刁标。這其中包括 Navigator颠通，它管理由字符串標(biāo)識的 widget 棧，也稱為“routes”命雀。 Navigator 可以讓你在應(yīng)用的頁面中平滑的切換蒜哀。使用 MaterialApp widget 不是必須的，但這是一個很好的做法吏砂。
3.2 Container
Container 是一個 widget，允許你自定義其子 widget
sample-flutter-layout.png
Container 跟 html中的div類似
| 名稱 | 功能 |
|---|---|
| width | 寬度 |
| height | 高度 |
| alignment | 內(nèi)容顯示方位 |
| decoration | BoxDecoration:實現(xiàn)邊框乘客、圓角狐血、陰影、形狀易核、漸變匈织、背景圖像 |
| margin | 外邊距 |
| padding | 內(nèi)邊距 |
| transform | 動畫 |
image-20221007231908610.png
代碼如下：
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 100, // 寬
height: 100, // 高
alignment: Alignment.center, // 內(nèi)容顯示方位
// 實現(xiàn)邊框、圓角牡直、陰影缀匕、形狀、漸變碰逸、背景圖像
decoration: BoxDecoration(
color: Colors.red, // 背景
border: Border.all(color: Colors.black, width: 2), // 邊框
borderRadius: BorderRadius.circular(10), // 圓角
// 陰影
boxShadow: const [
BoxShadow(
color: Colors.blue,
blurRadius: 10.0,
)
],
gradient:
// 線性漸變
const LinearGradient(colors: [Colors.green, Colors.pink]),
),
child: const Text(
"你好",
style: TextStyle(
color: Colors.yellow,
),
),
),
);
}
}
class MyButton extends StatelessWidget {
const MyButton({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 40,
alignment: Alignment.center,
margin: const EdgeInsets.all(10),
// transform: Matrix4.translationValues(40, 0, 0), //位移40（x,y,z ）
transform: Matrix4.rotationZ(0.2), // 旋轉(zhuǎn)
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20),
),
child: const Text(
"按鈕",
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
);
}
}
clipBehavior
它的類型是Clip乡小，clipBehavior是組件內(nèi)容邊緣的切割方式，分為四種：
- none (不做處理)
- hardEdge （當(dāng)內(nèi)容溢出時饵史，hardEdge切割容器邊緣最快满钟，但是精準(zhǔn)度欠佳，可能會有一些鋸齒存在胳喷。）
- antiAlias （抗鋸齒湃番，速度要比hardEdge慢一些，但是邊緣要平滑一些吭露。）
- antiAliasWithSaveLayer （圖層抗鋸齒吠撮，就是容器中每一個圖層都做抗鋸齒處理，而antiAlias是在容器的輪廓做抗鋸齒讲竿，antiAliasWithSaveLayer效果肯定會更好更平滑泥兰，但是速度最慢择浊，如果沒有明確指明，建議使用antiAlias逾条，這樣效果和性能能夠達(dá)到較好的平衡琢岩。）
如何使容器占滿上個容器
寬度 和 高度 = double.infinity 或者 double.maxFinite 都代表無窮大
3.3 Text
文本組件
| 名稱 | 功能 |
|---|---|
| textAlign | 文本對齊方式（center居中，left左對齊师脂，right右對齊担孔，justfy兩端對齊） |
| textDirection | 文本方向（ltr從左至右，rtl從右至左） |
| overflow | 文字超出屏幕之后的處理方式（clip裁剪吃警，fade漸隱糕篇，ellipsis省略號） |
| textScaleFactor | 字體顯示倍率 |
| maxLines | 文字顯示最大行數(shù) |
| style | 字體樣式 |
style 樣式
| 名稱 | 功能 |
|---|---|
| decoration | 文字裝飾線（none沒有線，lineThrough刪除線酌心，overline上劃線） |
| decorationColor | 裝飾線顏色 |
| decorationStyle | 裝飾線風(fēng)格（[dashed,dotted]虛線拌消，doule兩根線，solid一根實線安券，wavy波浪線） |
| wordSpacing | 單詞間隙（如果是負(fù)值墩崩，就更緊湊） |
| letterSpacing | 字母間隙 |
| fontStyle | 文字樣式 |
| fontSize | 文字大小 |
| color | 顏色 |
| fontWeight | 字體粗細(xì)（bold粗體，normal正常） |
3.4 Image
圖片組件
Image.network 加載網(wǎng)絡(luò)圖片
Image.asset 加載本地圖片
| 名稱 | 功能 |
|---|---|
| alignment | 圖片對其方式 |
| color 和 colorBlendMode | 設(shè)置圖片的背景顏色侯勉，通常和colorBlendMode配合一起使用鹦筹，這樣可以使圖片顏色和背景色混合 |
| fit | 控制圖片的拉伸和擠壓 BoxFit.fill：全圖顯示，圖片會被拉伸址貌，并充滿父容器 BoxFit.contain：全圖顯示铐拐，顯示原比例，可能會有空隙 BoxFit.cover：顯示可能拉伸练对，可能裁剪遍蟋，充滿 BoxFit.fitWidth：寬度充滿，顯示可能拉伸螟凭、裁剪 BoxFit.fitHeight：高度充滿虚青，顯示可能拉伸、裁剪 BoxFit.scaleDown：效果和contain差不多赂摆，但是此屬性不允許顯示超過原圖片大小挟憔，可小不可大 |
| repeat | 平鋪 ImageRepeat.repeat：橫向和縱向都進(jìn)行重復(fù)，直到鋪滿整個畫布 ImageRepeat.repeatX：橫向重復(fù)烟号，縱向不重復(fù) ImageRepeat.repeatY：縱向重復(fù)绊谭，橫向不重復(fù) |
class MyImage extends StatelessWidget {
const MyImage({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: 150,
height: 150,
margin: const EdgeInsets.fromLTRB(0, 60, 0, 0),
decoration: const BoxDecoration(color: Colors.yellow),
child: Image.network(
"http://sssssxxxxxx.png",
alignment: Alignment.topLeft,
fit: BoxFit.cover,
),
);
}
}
3.4.1 圓形圖片
第一個使用Container的圓角
第二個使用ClipOval
class MyClipImage extends StatelessWidget {
const MyClipImage({super.key});
@override
Widget build(BuildContext context) {
return ClipOval(
child: Image.network(
"https://img1.baidu.com/it/u=724179003,4096104503&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
width: 100,
height: 100,
fit: BoxFit.cover,
),
);
}
}
3.4.2 本地圖片
修改 pubspec.yaml 文件，打開注釋
assets:
- images/a.webp
Image(image: AssetImage("images/a.webp")
注：每次添加完新的圖片汪拥，都需要重新run下达传。這樣圖片資源，才能復(fù)制到build目錄下。
3.5 Icon
圖標(biāo)組件
3.5.1 系統(tǒng)Icon
class MyIcon extends StatelessWidget {
const MyIcon({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: const [
SizedBox(
height: 20,
),
// 系統(tǒng)圖標(biāo)
Icon(
Icons.home,
size: 40,
color: Colors.red,
),
],
);
}
}
3.5.2 自定義Icon
Icon類似于iconfont即字體圖標(biāo)宪赶，它是將圖標(biāo)做成字體文件宗弯，然后通過指定不同的字符顯示不同圖片
icon與Image相比的優(yōu)勢
- 體積小：可以減小安裝包大小搂妻。
- 矢量的：iconfont都是矢量圖標(biāo)蒙保，放大不會影響其清晰度。
- 可以應(yīng)用文本樣式：可以像文本一樣改變字體圖標(biāo)的顏色欲主、大小對齊等邓厕。
- 可以通過TextSpan和文本混用。
具體的看視頻扁瓢，查文檔
