前言

在 Flutter 中，應(yīng)用的頂級組件或根組件通常是在 main() 函數(shù)中通過 runApp() 方法創(chuàng)建的。這個組件通常是一個 MaterialApp、CupertinoApp、GetMaterialApp 或其他類似的應(yīng)用框架組件。

以下是一個創(chuàng)建 MaterialApp 作為根組件的示例：

void main() {runApp(MyApp());
}
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);}
}

在這個示例中，MyApp 是應(yīng)用的根組件，它返回了一個 MaterialApp 組件。MaterialApp 組件是應(yīng)用的主框架，它包含了應(yīng)用的主題、路由等設(shè)置。MyHomePage 組件是應(yīng)用的主頁面，它被設(shè)置為 MaterialApp 的 home 屬性，這意味著它是應(yīng)用啟動時顯示的第一個頁面。
請注意，你的根組件應(yīng)該是一個 StatelessWidget 或 StatefulWidget，并且它的 build 方法應(yīng)該返回一個組件。這個組件通常是一個應(yīng)用框架組件，如 MaterialApp 或 CupertinoApp，但也可以是任何其他類型的組件。

一、組件 MaterialApp

組件無需引入依賴，項(xiàng)目創(chuàng)建時，默認(rèn)存在。
這是 Flutter 提供的默認(rèn)應(yīng)用框架，它實(shí)現(xiàn)了 Material Design 風(fēng)格。它提供了路由、主題、本地化等基本功能。

優(yōu)點(diǎn)：簡單、易用。
缺點(diǎn)：功能相對基礎(chǔ)，如果需要更高級的功能（如狀態(tài)管理、依賴注入等），可能需要使用其他庫。
例子：

/** 引入使用的組件 */
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';/** 主函數(shù) */
void main() {runApp(MyApp());
}/*** StatelessWidget 是一個靜態(tài)組件（不可變組件）* StatelessWidget 是非?；A(chǔ)的 Flutter 組件，它用于構(gòu)建不需要維護(hù)內(nèi)部狀態(tài)的用戶界面* 請注意，雖然 StatelessWidget 本身是不可變的，但它可以依賴于可以改變的數(shù)據(jù)* 例如，它可以依賴于父組件傳遞的參數(shù)，或者依賴于 InheritedWidget 提供的數(shù)據(jù)* 當(dāng)這些數(shù)據(jù)改變時，StatelessWidget 會被重新構(gòu)建，從而更新用戶界面*/
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',/** ThemeData對象定義應(yīng)用主題色 */theme: ThemeData(primarySwatch: Colors.blue,),/** * localizationsDelegates 和 supportedLocales 屬性被設(shè)置為支持英語和中文的本地化代理，* 這使得應(yīng)用可以根據(jù)用戶的設(shè)備設(shè)置顯示不同的語言*/localizationsDelegates: [GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,],supportedLocales: [const Locale('en', ''), // Englishconst Locale('zh', ''), // Chinese],/** initialRoute 設(shè)置初始展示的路由頁面 */initialRoute: '/',/** routes 路由表 */routes: {'/': (context) => HomePage(),'/second': (context) => SecondPage(),},);}
}class HomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(/** 標(biāo)題設(shè)置 */appBar: AppBar(title: Text('Home Page'),),/** 內(nèi)容設(shè)置 */body: Center(/** 動效按鈕 */child: RaisedButton(child: Text('Go to Second Page'),/** 點(diǎn)擊事件 */onPressed: () {/** 路由跳轉(zhuǎn)頁面 */Navigator.pushNamed(context, '/second');},),),);}
}class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Second Page'),),body: Center(child: Text('This is the second page'),),);}
}

二、組件 CupertinoApp

組件無需引入依賴，項(xiàng)目創(chuàng)建時，默認(rèn)存在，在 pubspec.yaml 文件中，cupertino_icons 依賴包含該組件。
這是 Flutter 提供的另一個應(yīng)用框架，它實(shí)現(xiàn)了 Cupertino (iOS) 風(fēng)格。它的優(yōu)點(diǎn)和缺點(diǎn)與 MaterialApp 類似，但它提供了一套模仿 iOS 界面設(shè)計(jì)的組件
例子：同上，替換關(guān)鍵組件即可。

三、組件 GetMaterialApp

該組件在項(xiàng)目創(chuàng)建時，沒有默認(rèn)攜帶，使用該組件要在 pubspec.yaml 文件添加 get 依賴以及版本，版本號在 pub.dev 搜索 get 進(jìn)行查找，進(jìn)入找到 Versions 標(biāo)簽進(jìn)行查看版本號。
這是 GetX 庫提供的應(yīng)用框架，它提供了一些額外的功能，如狀態(tài)管理、依賴注入、路由管理等。
優(yōu)點(diǎn)：功能強(qiáng)大、易用。
缺點(diǎn)：需要額外的學(xué)習(xí)成本，而且如果你不需要它的高級功能，使用它可能會有些過度。
例子：

import 'package:flutter/material.dart';
import 'package:get/get.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return GetMaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),initialRoute: '/',/** * GetMaterialApp 的 getPages 屬性是一個路由表，這使得應(yīng)用可以通過路由名進(jìn)行頁面跳轉(zhuǎn)。* 在這個例子中，應(yīng)用有兩個頁面：HomePage 和 SecondPage，它們的路由名分別是 '/' 和 '/second'。*/getPages: [GetPage(name: '/', page: () => HomePage()),GetPage(name: '/second', page: () => SecondPage()),],);}
}
/** * HomeController 是一個 GetxController，它包含了一個可觀察的 count 變量和一個 increment 方法。* HomePage 使用 Get.put() 方法創(chuàng)建了一個 HomeController 的實(shí)例，并將它存儲在 GetX 的依賴注入系統(tǒng)中。*/
class HomeController extends GetxController {var count = 0.obs;void increment() {count++;}
}class HomePage extends StatelessWidget {final HomeController controller = Get.put(HomeController());@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home Page'),),body: Center(/** HomePage 使用 Obx() 組件來監(jiān)聽 count 變量的變化，并在 count 變化時重新構(gòu)建 Text 組件 */child: Obx(() => Text('Clicks: ${controller.count}')),),floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: controller.increment,),);}
}class SecondPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Second Page'),),body: Center(child: RaisedButton(child: Text('Go back'),/** SecondPage 使用 Get.back() 方法來返回上一個頁面，這是 GetX 提供的路由管理功能的一部分 */onPressed: () => Get.back(),),),);}
}

四、組件 Phoenix

該組件需要引入依賴，在 pubspec.yaml 寫入依賴 phoenix 以及版本號，版本號在 pub.dev 搜索 flutter_phoenix 進(jìn)入找到 Versions 標(biāo)簽進(jìn)行查看版本號。
這是 phoenix 庫提供的應(yīng)用框架，它的主要功能是可以在運(yùn)行時重啟應(yīng)用。這對于一些需要清理全局狀態(tài)或重載應(yīng)用配置的場景非常有用。
例子：

import 'package:flutter/material.dart';
import 'package:flutter_phoenix/flutter_phoenix.dart';void main() {runApp(Phoenix(child: MyApp()));
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Phoenix Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Phoenix Demo Home Page'),);}
}class MyHomePage extends StatelessWidget {MyHomePage({Key? key, required this.title}) : super(key: key);final String title;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(title),),body: Center(child: RaisedButton(child: Text('Restart App'),onPressed: () {/** 重啟應(yīng)用 */Phoenix.rebirth(context);},),),);}
}