在Flutter官方文檔中我們搭建了Flutter的開發(fā)環(huán)境慌烧，并且創(chuàng)建了一項(xiàng)目逐抑，項(xiàng)目默認(rèn)就生成了一些代碼，學(xué)習(xí)任何語(yǔ)言第一步一般都是從入口函數(shù)著手屹蚊，然后一步一步往下走厕氨。
本篇博客我們就以默認(rèn)生成的項(xiàng)目為準(zhǔn)，著重的介紹一下Flutter項(xiàng)目的目錄結(jié)構(gòu)及代碼詳解汹粤。
先來(lái)看看Flutter項(xiàng)目的目錄結(jié)構(gòu)
我們著重需要注意一下幾個(gè)文件夾,其他的暫時(shí)不用理會(huì)
文件夾 作用
下面我們來(lái)看一下lib文件夾中的代碼命斧，lib中只有一個(gè)main.dart文件。
通過(guò)英文注釋我們大概也能知道每個(gè)類是干什么的嘱兼，有什么作用国葬，默認(rèn)運(yùn)行界面就是下圖這樣，點(diǎn)擊浮動(dòng)按鈕會(huì)改變計(jì)數(shù)Text的值。
下面我們來(lái)一點(diǎn)點(diǎn)的看汇四，大家可以新建一個(gè)Flutter項(xiàng)目對(duì)照原本的代碼看接奈。
入口函數(shù)
首先是入口函數(shù)，main方法就是入口函數(shù)通孽，默認(rèn)的箭頭函數(shù)寫法跟下面寫法效果一致序宦，返回一個(gè)widget，MyApp就是我們要展示的啟動(dòng)界面背苦。
/*
* 入口函數(shù)
*
* */
void main() => runApp(MyApp()); //Dart中的箭頭函數(shù)挨厚，跟kotlin很像，跟下面寫法效果一致
//main(){
//? return new MyApp();
//}
下面我們來(lái)看一下MyApp類糠惫，這里的MyApp類中返回了一個(gè)MaterialApp widget疫剃，MaterialApp可以理解為ui的風(fēng)格，Android上就是這種風(fēng)格的UI. ios上我們可以使用CupertinoApp硼讽。這個(gè)可以自己修改嘗試
在MaterialApp中我們可以配置主題顏色巢价，控件的樣式等等
/*
/*
* 這里相當(dāng)于Android中的Application類
* StatelessWidget表示無(wú)狀態(tài)控件
* */
class MyApp extends StatelessWidget {
? // This widget is the root of your application.
? @override
? Widget build(BuildContext context) {
? ? /*
? ? * MaterialApp表明app的風(fēng)格是Material Design風(fēng)格的
? ? * 這里我們可以配置app的主題相關(guān)屬性比如顏色，按鈕風(fēng)格等等固阁，類似于Android中的style文件
? ? * */
? ? return MaterialApp(
? ? ? title: 'Flutter Demo',
? ? ? /*主題相關(guān)配置
? ? ? * 這里我們可以配合app整體的主題樣式壤躲，比如整體顏色，控件默認(rèn)的樣式等
? ? ? * */
? ? ? theme: ThemeData(
? ? ? ? /*這個(gè)地方就類似于Android中的style文件配置备燃，主要就是主題的配置*/
? ? ? ? primaryColor: Colors.red,
? ? ? ? primaryColorDark: Colors.red,
? ? ? ? accentColor: Colors.orange,
? ? ? ? buttonTheme: ButtonThemeData(buttonColor: Colors.red,textTheme: ButtonTextTheme.primary)
? ? ? ),
? ? ? /*home指定了啟動(dòng)后顯示的頁(yè)面
? ? ? * 類似于我們?cè)贏ndroidManifest中配置啟動(dòng)頁(yè)面
? ? ? * */
? ? ? home: MyHomePage(title: 'Flutter示例'),
? ? );
? }
}
下面我們來(lái)看一下MyHomePage 類
MyHomePage 就是啟動(dòng)后顯示的第一個(gè)頁(yè)面碉克，繼承自StatefulWidget，注釋的很清楚并齐，就不多說(shuō)了漏麦。
/*
* StatefulWidget是一個(gè)有狀態(tài)的控件，如果你的頁(yè)面需要更新ui况褪，那么該頁(yè)面就要繼承自StatefulWidget
* 如果只是一個(gè)純展示的頁(yè)面撕贞，只需要繼承自StatelessWidget即可
* MyHomePage在上面已經(jīng)被指定為啟動(dòng)頁(yè)面
* 該頁(yè)面有一個(gè)計(jì)數(shù)的邏輯，會(huì)更新ui测垛，所以需要繼承自StatefulWidget
* */
class MyHomePage extends StatefulWidget {
? /*Dart 中的構(gòu)造方法? {}里面的參數(shù)表示可選參數(shù)捏膨，跟kotlin概念差不多
? * this.title默認(rèn)會(huì)把值賦給下面的title
? * */
? MyHomePage({Key key, this.title}) : super(key: key);
? /*聲明一個(gè)變量 用final修飾表示只能賦一次值
? * 在上面的構(gòu)造上方法中已經(jīng)有賦值操作了，所以后面我們就不能再更改title的值了
? * */
? final String title;
? /*所有繼承自StatefulWidget的控件都要重寫createState()這個(gè)方法
? * 可以理解為指定該頁(yè)面的狀態(tài)是由誰(shuí)來(lái)控制的
? * 在Dart中下劃線開頭聲明的變量和方法食侮，其默認(rèn)訪問(wèn)權(quán)限就是私有的
? * 類似于java中用private關(guān)鍵字修飾,只能在類的內(nèi)部訪問(wèn)
? * */
? @override
? _MyHomePageState createState() => _MyHomePageState();
}
_MyHomePageState 類中的代碼稍微多一些号涯。
我們自己新增了一個(gè)_reduceCounter方法，在setState中修改數(shù)據(jù)后锯七，ui的狀態(tài)會(huì)自動(dòng)更改链快。
然后我們添加了一個(gè)按鈕，并修改了Text的樣式起胰，效果圖可以看下面
/*
*State是一個(gè)狀態(tài)對(duì)象久又，<>里面是表示該狀態(tài)是跟誰(shuí)綁定的巫延。
* 我們修改狀態(tài)時(shí)就是在該類中進(jìn)行編寫
*
* */
class _MyHomePageState extends State<MyHomePage> {
? int _counter = 0;
? /*計(jì)數(shù)器加一*/
? void _incrementCounter() {
? ? setState(() {
? ? ? _counter++;
? ? });
? }
? /*這里我們自己新建一個(gè)方法，很簡(jiǎn)單地消，就是執(zhí)行減一操作*/
? void _reduceCounter() {
? ? setState(() {
? ? ? _counter--;
? ? });
? }
? @override
? Widget build(BuildContext context) {
/*Scaffold可以看作是Material Design中的一個(gè)模板
*看源碼發(fā)現(xiàn)它繼承自StatefulWidget炉峰，包含了appBar,body,drawer等控件
* */
? ? return Scaffold(
? ? ? /*appBar 相當(dāng)于Android中的ToolBar*/
? ? ? appBar: AppBar(
? ? ? ? /*這里的widget實(shí)際上就是MyHomePage*/
? ? ? ? title: Text(widget.title),
? ? ? ),
? ? ? /*中間的內(nèi)容布局*/
? ? ? body: Center(
? ? ? ? /*Column表示一行 對(duì)應(yīng)的Row表示一列
? ? ? ? * 這里我們改成列看一下
? ? ? ? * */
? ? ? ? child: Column(
? ? ? ? ? /*mainAxisAlignment翻譯成中文就是主軸對(duì)準(zhǔn)的意思。
? ? ? ? ? * 我們可以把值設(shè)置為star,end等等
? ? ? ? ? * */
? ? ? ? ? mainAxisAlignment: MainAxisAlignment.center,
? ? ? ? ? /*子控件脉执，是一個(gè)List類型*/
? ? ? ? ? children: <Widget>[
? ? ? ? ? ? /*文本控件*/
? ? ? ? ? ? Text(
? ? ? ? ? ? ? '你點(diǎn)擊的次數(shù):',
? ? ? ? ? ? ? /*這里我們可以修改樣式*/
? ? ? ? ? ? ? style: TextStyle(fontSize: 30,letterSpacing: 3),
? ? ? ? ? ? ),
? ? ? ? ? ? /*$_counter 用法跟kotlin中的${_counter}類似疼阔，*/
? ? ? ? ? ? Text(
? ? ? ? ? ? ? '$_counter',
? ? ? ? ? ? ? /*Text的樣式*/
? ? ? ? ? ? ? style: Theme.of(context).textTheme.display3,
? ? ? ? ? ? ),
? ? ? ? ? ? /*我們新增一個(gè)按鈕，用來(lái)實(shí)現(xiàn)點(diǎn)擊使計(jì)數(shù)器減一*/
? ? ? ? ? ? RaisedButton(
? ? ? ? ? ? ? /*_reduceCounter是上面我們自己新增的方法半夷，Dart中可以把方法作為參數(shù)傳遞*/
? ? ? ? ? ? ? onPressed: _reduceCounter,
? ? ? ? ? ? ? child: Text("減一"),
? ? ? ? ? ? )
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? ? /*浮動(dòng)按鈕*/
? ? ? floatingActionButton: FloatingActionButton(
? ? ? ? /*_incrementCounter實(shí)際上就是一個(gè)上面默認(rèn)的_incrementCounter()方法婆廊，*/
? ? ? ? onPressed: _incrementCounter,
? ? ? ? tooltip: '計(jì)數(shù)器加一',
? ? ? ? child: Icon(Icons.add),
? ? ? ),
? ? ? // This trailing comma makes auto-formatting nicer for build methods.
? ? );
? }
}
修改后運(yùn)行效果圖如下
至此，F(xiàn)lutter默認(rèn)項(xiàng)目中的目錄結(jié)構(gòu)以及代碼各自的作用就介紹完畢了巫橄，知道了代碼的流程后我們就可以開始修改代碼然后看看效果了淘邻，在Flutter中，一切皆widget湘换，我們的界面都是由各種widget堆疊出來(lái)的宾舅，下一步我們就可以去學(xué)習(xí)一下Flutter中widget了。
