【Flutter】创建应用顶级组件，应用根组件 (学习记录)

前言

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

以下是一个创建 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 是应用的根组件，它返回了一个 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 {@overrideWidget 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', ''), // Englishconst Locale('zh', ''), // Chinese],/** initialRoute 设置初始展示的路由页面 */initialRoute: '/',/** routes 路由表 */routes: {'/': (context) => HomePage(),'/second': (context) => SecondPage(),},);}
}class HomePage extends StatelessWidget {@overrideWidget 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 {@overrideWidget 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 {@overrideWidget 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());@overrideWidget 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 {@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 进入找到 Versions 标签进行查看版本号。
这是 phoenix 库提供的应用框架，它的主要功能是可以在运行时重启应用。这对于一些需要清理全局状态或重载应用配置的场景非常有用。
例子：

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: () {/** 重启应用 */Phoenix.rebirth(context);},),),);}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/211077.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

牛客算法心得——环形数组的连续子数组最大和（dp）

牛客算法心得——环形数组的连续子数组最大和（dp）

大家好，我是晴天学长， 一个找连续子数组最大和的变形题，需要的小伙伴可以关注支持一下哦！后续会继续更新的。💪💪💪 1) .环形数组的连续子数组的最大和 描述 给定一个长度为 nn 的环形整数数组&…
阅读更多...
『 MySQL数据库 』聚合统计

『 MySQL数据库 』聚合统计

文章目录 前言 🥑🥝 聚合函数🍓 COUNT( ) 查询数据数量🍓 SUM( ) 查询数据总和🍓 AVG( ) 查询数据平均值🍓 MAX( ) 查询数据最大值🍓 MIN( ) 查询数据最小值 🥝 数据分组GROUP BY子句…
阅读更多...
湖科大计网：计算机网络概述

湖科大计网：计算机网络概述

一、计算机网络的性能指标 一、速率 有时候数据量也认为是以10为底的，看怎么好算。（具体吉大考试用什么待商榷） 二、带宽 在模拟信号系统中带宽的含义，本课程中用到的地方是：香农定理和奈奎斯特定理公式的应用之中。 …
阅读更多...
全面高压化与全面超快充，破解新能源汽车的时代难题

全面高压化与全面超快充，破解新能源汽车的时代难题

是什么让新能源车主感到疲惫与焦虑？是什么阻挡更多消费者选择新能源汽车？我们在身边进行一个简单的调查就会发现，问题的答案非常一致：充电。 充电难，充电慢的难题，始终是困扰新能源汽车产业发展&#xff0c…
阅读更多...
vue，uniapp的pdf等文件在线预览

vue，uniapp的pdf等文件在线预览

vue，uniapp文件在线预览方案，用了个稍微偏门一点的方法实现了 通过后端生成文件查看页面，然后前端只要展示这个网页就行，uniapp就用web-view来展示，后台系统就直接window.open()打开就行 示例查看PDF文件，…
阅读更多...
每日一练【四数之和】

每日一练【四数之和】

一、题目描述 18. 四数之和 给你一个由 n 个整数组成的数组 nums ，和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] （若两个四元组元素一一对应，则认为两个四元组重复&#x…
阅读更多...
基于ssm社区管理与服务的设计与实现论文

基于ssm社区管理与服务的设计与实现论文

目录 摘 要 1 Abstract 2 第一章 绪论 3 1.1研究背景 3 1.2 研究现状 3 1.3 研究内容 4 第二章 系统关键技术 5 2.1 Java简介 5 2.2 MySql数据库 5 2.3 B/S结构 6 2.4 Tomcat服务器 6 第三章 系统分析 7 3.1可行性分析 7 3.1.1技术可行性 7 3.1.2经济可行性 7 3.1.3运行可行性…
阅读更多...
uniapp自定义的日历（纯手写）

uniapp自定义的日历（纯手写）

效果图&#xff1a; html&#xff1a; <!-- 年月 --><view class"box"><view class"box_time"><view class"time"><image click"lefts" :src"url/uploads/20231206/9d1fb520b12383960dca3c214d84fa0…
阅读更多...
vue获取主机id和IP地址

vue获取主机id和IP地址

获取主机id和IP地址 在vue.config.js const os require(“os”); function getNetworkIp() { let needHost “”; // 打开的host try { // 获得网络接口列表 let network os.networkInterfaces(); for (let dev in network) { let iface network[dev]; for (let i 0; i …
阅读更多...
LLM之Agent（五）| AgentTuning：清华大学与智谱AI提出AgentTuning提高大语言模型Agent能力

LLM之Agent（五）| AgentTuning：清华大学与智谱AI提出AgentTuning提高大语言模型Agent能力

​论文地址&#xff1a;https://arxiv.org/pdf/2310.12823.pdf Github地址&#xff1a;https://github.com/THUDM/AgentTuning 在ChatGPT带来了大模型的蓬勃发展&#xff0c;开源LLM层出不穷&#xff0c;虽然这些开源的LLM在各自任务中表现出色&#xff0c;但是在真实环境下作…
阅读更多...
【Android】Glide的简单使用（下）

【Android】Glide的简单使用（下）

文章目录 缓存设置内存缓存硬盘缓存自定义磁盘缓存行为图片请求优先级缩略图旋转图片Glide的回调:TargetsBaseTargetTarget注意事项设置具体尺寸的Target 调试及Debug获取异常信息 配置第三方网络库自定义缓存 缓存设置 GlideApp .with(context).load(gifUrl).asGif().error(…
阅读更多...
MySQL_7.索引概述

MySQL_7.索引概述

1.什么是索引 在关系数据库中&#xff0c;索引是一种单独的、物理的数对数据库表中一列或多列的值进行排序的一种存储结构。 它是某个表中一列或若干列值的集合和相应的指向表中物理标识这些值的数据页的逻辑指针清单 2.索引的优点 (1)通过创建唯一性索引,可以保证数据库表中每…
阅读更多...
编写Yaml文件当Poc,利用Nuclei扫描器去扫描漏洞

编写Yaml文件当Poc,利用Nuclei扫描器去扫描漏洞

编写Yaml文件当Poc,利用Nuclei扫描器去扫描漏洞 YAML是一种数据序列化语言&#xff0c;它的基本语法规则注意如下&#xff1a; -大小写敏感 -使用缩进表示层级关系 -缩进时不允许使用Tab键&#xff0c;只允许使用空格。 -缩进的空格数目不重要&#xff0c;只要相同层级的元…
阅读更多...
VSCode如何设置Vue前端的debug调试

VSCode如何设置Vue前端的debug调试

vscode在调试vue.代码时&#xff0c;如何进行debug? 1.安装Chrome Debug插件。 2.在launch.json中&#xff0c;将url修改成你前端项目的路径&#xff1a; 1 {2 // Use IntelliSense to learn about possible attributes.3 // Hover to view descriptions of existing att…
阅读更多...
redis 三主三从高可用集群docker swarm

redis 三主三从高可用集群docker swarm

由于数据量过大&#xff0c;单个Master复制集难以承担&#xff0c;因此需要对多个复制集进行集群&#xff0c;形成水平扩展每个复制集只负责存储整个数据集的一部分&#xff0c;这就是Redis的集群&#xff0c;其作用是提供在多个Redis节点间共享数据的程序集。 官网介绍地址 re…
阅读更多...
Elasticsearch：向量数据库的真相

Elasticsearch：向量数据库的真相

通过工作示例了解什么是向量数据库、它们如何实现 “相似性” 搜索以及它们可以在明显的 LLM 空间之外的哪些地方使用。除非你一直生活在岩石下&#xff0c;否则你可能听说过诸如生成式人工智能和大型语言模型&#xff08;LLM&#xff09;之类的术语。 除此之外&#xff0c;你很…
阅读更多...
如何利用Axure制作移动端产品原型

如何利用Axure制作移动端产品原型

Axure是一款专业的快速原型设计工具&#xff0c;作为专业的原型设计工具&#xff0c;Axure 能够快速、高效地创建原型&#xff0c;同时支持多人协作设计和版本控制管理。它已经得到了许多大公司的采用&#xff0c;如IBM、微软、思科、eBay等&#xff0c;这些公司都利用Axure 进…
阅读更多...
android 13.0 Settings去掉二级三级菜单搜索功能

android 13.0 Settings去掉二级三级菜单搜索功能

1.概述 在13.0的系统rom定制化开发中，由于客户定制开发需求，需要去掉Settings里面的搜索功能，主页面的搜索功能，在前面的章节已经讲了 这里需要去掉二级三级菜单的搜索功能，需要从搜索功能流程分析去掉搜索功能 2.Settings去掉二级三级菜单搜索功能核心代码 packages/ap…
阅读更多...
stl模板库成员函数重载类型混肴编译不通过解决方法

stl模板库成员函数重载类型混肴编译不通过解决方法

stl模板库成员函数重载类型混肴编译不通过解决方法 这种方式编译不通过IsArithmetic和HasMemberList编译器存在混肴 template <typename T, typename Enable std::enable_if<IsArithmetic<T>::value>::type >static void DumpWrapper(T* filed, std::strin…
阅读更多...
SAP UI5 walkthrough step7 JSON Model

SAP UI5 walkthrough step7 JSON Model

这个章节&#xff0c;帮助我们理解MVC架构中的M 我们将会在APP中新增一个输入框&#xff0c;并将输入的值绑定到model&#xff0c;然后将其作为描述&#xff0c;直接显示在输入框的右边 首先修改App.controllers.js webapp/controller/App.controller.js sap.ui.define([&…
阅读更多...
最新文章

Copyright @ 2022~2023