Widget基本了解
上一節(jié),我們認(rèn)識了如何創(chuàng)建一個(gè)Flutter工程,認(rèn)識了工程目錄, 也知道了lib目錄是我們將要開發(fā)程序的目錄, 目錄中的main.dart是我們整個(gè)項(xiàng)目的入口文件.接下來我們將了解Widget,但是在認(rèn)識Widget之前,我們先好好認(rèn)識一個(gè)入口文件,以及入口文件中的入口方法
1. 入口文件,入口方法
1.1 入口文件和入口方法的了解
每一個(gè)flutter項(xiàng)目中的lib目錄里面都有一個(gè)main.dart,這個(gè)文件就是flutter的入口文件
// main.dart
void main(){
runApp(MyApp())
}
// 可以簡寫為
void main() => runApp(MyApp())
其中的main方法是dart的入口方法,runApp是flutter 的入口方法
MyApp是自定義的一個(gè)組件
也就是說項(xiàng)目運(yùn)行的流程如下
- 項(xiàng)目運(yùn)行首先會(huì)找到入口文件
main.dart - 在入口文件
main.dart中執(zhí)行dart的入口方法main(){} - 在入口方法中通過
runApp方法調(diào)用MyApp方法,MyApp則為Flutter的入口組件() - 因此程序通過Flutter的入口組件開始進(jìn)入到Flutter組件中運(yùn)行Flutter代碼
1.2 通過示例了解入口方法
既然MyApp是Flutter程序的入口組件,那么我們就把這個(gè)入口改成自定義的
import 'package:flutter/material.dart';
void main(){
runApp(Center( // 標(biāo)準(zhǔn)寫法應(yīng)該是new Center 只不過data運(yùn)行類不寫new
child: Text( // 這是dart中的命名參數(shù)
"你好flutter",
textDirection: TextDirection.ltr // 文字顯示的方向性
)
));
}
示例結(jié)果:
使用說明:
Center和Text是Flutter內(nèi)置的組件,先做了解,之后再細(xì)講.
其實(shí)像示例中這樣的開發(fā)方式,非常不友好,如果代碼過多的話,耦合性就會(huì)非常高,所以我們可以抽出為單獨(dú)的組件
那么接下來,我們就來了解flutter組件的一些概念,
2. Widget簡介
2.1 Widget
Widget簡單說明
- Widget只是UI元素的一個(gè)配置數(shù)據(jù)
- Widget類本身就是一個(gè)抽象類,一般不會(huì)直接使用Widget類來實(shí)現(xiàn)組件
- 通常會(huì)使用繼承Widget的StatelessWidget和StatefulWidget兩個(gè)抽象類
2.2 關(guān)于Flutter中的組件
Flutter組件說明
- 在flutter中自定義組件其實(shí)就是一個(gè)類,
- 組件類需要繼承StatelessWidget/StatefulWidget兩個(gè)抽象類
- StatelessWidget 是無狀態(tài)組件,狀態(tài)不可變的widget
- StatefulWidget 是有狀態(tài)的組件,持有的狀態(tài)可能在widget生命周期改變
3. StatelessWidget 抽象類
3.1 簡單說明
StatelessWidget抽象類簡單說明:
- StatelessWidget是無狀態(tài)的抽象類,一般用于不需要維護(hù)狀態(tài)的場景.
- 通過在
build方法中通過嵌套其他Widget來構(gòu)建UI
3.2 Context
上面說到了StatelessWidget通過build嵌套其他組件來構(gòu)建UI,那么build方法優(yōu)惠接受什么值呢?
Context說明:
-
build方法接受一個(gè)context參數(shù),context卻是BuildContext的實(shí)例.表示當(dāng)前widget上下文 - 每一個(gè)
widget都會(huì)對應(yīng)一個(gè)context對象 -
context則是當(dāng)前widget在widget樹中位置需要執(zhí)行的一個(gè)句柄
3.3 示例
通過示例了解StatelessWidget和Context.
本示例就是將上面得示例,從runApp()方法中的組件抽離出來,
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
// App 就是我們自定義的類(也可以叫組件),這個(gè)類覆寫了無狀態(tài)抽象類
class App extends StatelessWidget{
@override
Widget build(BuildContext context){
// 返回一個(gè)組件
return Center(
child: Text(
"你好,Flutter", // 文本內(nèi)容
textDirection: TextDirection.ltr, // 文字的顯示方向
// 處理了文字樣式
style: TextStyle(
fontSize: 40, // 文字的大小
color: Colors.yellow // 文字的顏色
)
)
);
}
}
在示例中我們將runApp()方法里的內(nèi)容抽離為一個(gè)自定義的組件.并給文本添加了一些樣式.
這就是對于StatelessWidget的認(rèn)識, 至于StatefulWidget里面涉及到狀態(tài),已經(jīng)狀態(tài)的生命周期,
因此StatefulWidget抽象類,我們放在后面再去認(rèn)識它.
3. Flutter SDK內(nèi)置組件庫的介紹
Flutter提供了一套豐富、強(qiáng)大的基礎(chǔ)組件，
在基礎(chǔ)組件庫之上Flutter又提供兩套視覺風(fēng)格:
- Material風(fēng)格（Android默認(rèn)的視覺風(fēng)格）
- Cupertino風(fēng)格（iOS視覺風(fēng)格）的組件庫。
要使用基礎(chǔ)組件庫，需要先導(dǎo)入：
import 'package:flutter/widgets.dart';
3.1 基礎(chǔ)組件庫的了解
-
Text：該組件可讓您創(chuàng)建一個(gè)帶格式的文本。 -
Row,Column基于FlexBox布局模型,可以在水平(Row)和垂直(Column)方向創(chuàng)建靈活布局的彈性布局類Widget -
Stack基于Web中絕對布局模式設(shè)計(jì)的布局方案,取代了線性布局 -
Container:是可以創(chuàng)建矩形視覺的元素.- 可以通過
BoxDecoration來裝飾元素,入background,邊框或者陰影 - 可以設(shè)置邊距(margin),填充(padding),以及應(yīng)用大小的約束
- 可以通過
3.2 Material組件
Flutter提供了一套豐富的Material組件
Material組件說明:
- 可以幫助我們構(gòu)建遵循Material Design設(shè)計(jì)規(guī)范的應(yīng)用程序
- 應(yīng)用程序已
MaterialApp組件開始, - 該組件會(huì)在應(yīng)用程序根部創(chuàng)建一些必要的組件,比如
Thema組件用于分配應(yīng)用主題
Material還有一些其他的屬性,下節(jié)在聊, 這里先做簡單的了解
