【Flutter】创建应用顶级组件，应用根组件 (学习记录)-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Flutter】创建应用顶级组件，应用根组件 (学习记录)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

在 Flutter 中，应用的顶级组件或根组件通常是在 main() 函数中通过 runApp() 方法创建的。这个组件通常是一个 MaterialApp、CupertinoApp、GetMaterialApp 或其他类似的应用框架组件。

以下是一个创建 MaterialApp 作为根组件的示例：

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

在这个示例中，MyApp 是应用的根组件，它返回了一个 MaterialApp 组件。MaterialApp 组件是应用的主框架，它包含了应用的主题、路由等设置。MyHomePage 组件是应用的主页面，它被设置为 MaterialApp 的 home 属性，这意味着它是应用启动时显示的第一个页面。
请注意，你的根组件应该是一个 StatelessWidget 或 StatefulWidget，并且它的 build 方法应该返回一个组件。这个组件通常是一个应用框架组件，如 MaterialApp 或 CupertinoApp，但也可以是任何其他类型的组件。

一、组件 MaterialApp

组件无需引入依赖，项目创建时，默认存在。
这是 Flutter 提供的默认应用框架，它实现了 Material Design 风格。它提供了路由、主题、本地化等基本功能。

优点：简单、易用。
缺点：功能相对基础，如果需要更高级的功能（如状态管理、依赖注入等），可能需要使用其他库。
例子：

/** 引入使用的组件 */
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

/** 主函数 */
void main() {
  runApp(MyApp());
}

/**
 * StatelessWidget 是一个静态组件（不可变组件）
 * StatelessWidget 是非常基础的 Flutter 组件，它用于构建不需要维护内部状态的用户界面
 * 请注意，虽然 StatelessWidget 本身是不可变的，但它可以依赖于可以改变的数据
 * 例如，它可以依赖于父组件传递的参数，或者依赖于 InheritedWidget 提供的数据
 * 当这些数据改变时，StatelessWidget 会被重新构建，从而更新用户界面
 */
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      /** ThemeData对象定义应用主题色 */
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      /** 
       * localizationsDelegates 和 supportedLocales 属性被设置为支持英语和中文的本地化代理，
       * 这使得应用可以根据用户的设备设置显示不同的语言
       */
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''), // English
        const Locale('zh', ''), // Chinese
      ],
      /** initialRoute 设置初始展示的路由页面 */
      initialRoute: '/',
      /** routes 路由表 */
      routes: {
        '/': (context) => HomePage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      /** 标题设置 */
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      /** 内容设置 */
      body: Center(
      /** 动效按钮 */
        child: RaisedButton(
          child: Text('Go to Second Page'),
          /** 点击事件 */
          onPressed: () {
            /** 路由跳转页面 */
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('This is the second page'),
      ),
    );
  }
}

二、组件 CupertinoApp

组件无需引入依赖，项目创建时，默认存在，在 pubspec.yaml 文件中，cupertino_icons 依赖包含该组件。
这是 Flutter 提供的另一个应用框架，它实现了 Cupertino (iOS) 风格。它的优点和缺点与 MaterialApp 类似，但它提供了一套模仿 iOS 界面设计的组件
例子：同上，替换关键组件即可。

三、组件 GetMaterialApp

该组件在项目创建时，没有默认携带，使用该组件要在 pubspec.yaml 文件添加 get 依赖以及版本，版本号在 pub.dev 搜索 get 进行查找，进入找到 Versions 标签进行查看版本号。
这是 GetX 库提供的应用框架，它提供了一些额外的功能，如状态管理、依赖注入、路由管理等。
优点：功能强大、易用。
缺点：需要额外的学习成本，而且如果你不需要它的高级功能，使用它可能会有些过度。
例子：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      /** 
       * GetMaterialApp 的 getPages 属性是一个路由表，这使得应用可以通过路由名进行页面跳转。
       * 在这个例子中，应用有两个页面：HomePage 和 SecondPage，它们的路由名分别是 '/' 和 '/second'。
       */
      getPages: [
        GetPage(name: '/', page: () => HomePage()),
        GetPage(name: '/second', page: () => SecondPage()),
      ],
    );
  }
}
/** 
 * HomeController 是一个 GetxController，它包含了一个可观察的 count 变量和一个 increment 方法。
 * HomePage 使用 Get.put() 方法创建了一个 HomeController 的实例，并将它存储在 GetX 的依赖注入系统中。
 */
class HomeController extends GetxController {
  var count = 0.obs;

  void increment() {
    count++;
  }
}

class HomePage extends StatelessWidget {
  final HomeController controller = Get.put(HomeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        /** HomePage 使用 Obx() 组件来监听 count 变量的变化，并在 count 变化时重新构建 Text 组件 */
        child: Obx(() => Text('Clicks: ${controller.count}')),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: controller.increment,
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget 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 进入找到 Versions 标签进行查看版本号。
这是 phoenix 库提供的应用框架，它的主要功能是可以在运行时重启应用。这对于一些需要清理全局状态或重载应用配置的场景非常有用。
例子：文章来源地址https://www.toymoban.com/news/detail-756066.html

import 'package:flutter/material.dart';
import 'package:flutter_phoenix/flutter_phoenix.dart';

void main() {
  runApp(Phoenix(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget 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;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Restart App'),
          onPressed: () {
          	/** 重启应用 */
            Phoenix.rebirth(context);
          },
        ),
      ),
    );
  }
}