当前位置: 首页 > news >正文

【Flutter】基础入门:代码基本结构

通过这个简单的 Flutter 示例程序,我们可以快速了解 Flutter 的代码结构,理解每个部分的作用。

import 'package:flutter/material.dart';  void main() {  runApp(const MyApp());  
}  class MyApp extends StatelessWidget {  const MyApp({super.key});  // 这个小部件是你应用程序的根部件。    Widget build(BuildContext context) {  return MaterialApp(  title: 'Flutter Demo',  theme: ThemeData(  // 这是你应用程序的主题。  //  // 尝试这个:尝试用 "flutter run" 运行你的应用程序。你会看到  // 应用程序有一个紫色的工具栏。然后在不退出应用程序的情况下,  // 尝试将下面 colorScheme 的 seedColor 更改为 Colors.green  // 然后调用 "热重载"(保存你的更改或按下 Flutter 支持的 IDE 中的 "热重载" 按钮,或如果你使用命令行启动应用程序,按 "r")。  //   // 注意计数器没有重置为零;应用程序状态在重载期间没有丢失。要重置状态,请改用热重启。  //  // 这也适用于代码,而不仅仅是值:大多数代码更改都可以通过热重载进行测试。  colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),  useMaterial3: true,  ),  home: const MyHomePage(title: 'Flutter Demo Home Page'),  );  }  
}  class MyHomePage extends StatefulWidget {  const MyHomePage({super.key, required this.title});  // 这个小部件是你应用程序的主页。它是有状态的,意味着  // 它有一个状态对象(在下面定义)包含影响  // 它外观的字段。  // 这个类是状态的配置。它保存由父级(在这种情况下是 App 小部件)提供的值(在这种情况下是标题),并  // 被状态的构建方法使用。Widget 子类中的字段  // 始终标记为 "final"。  final String title;    State<MyHomePage> createState() => _MyHomePageState();  
}  class _MyHomePageState extends State<MyHomePage> {  int _counter = 0;  void _incrementCounter() {  setState(() {  // 这个对 setState 的调用告诉 Flutter 框架在此状态中  // 发生了变化,这会导致它重新运行下面的构建方法  // 以便显示可以反映更新后的值。如果我们在不调用 setState() 的情况下更改  // _counter,那么构建方法将不会再次被调用,因此看起来不会发生任何事情。  _counter++;  });  }    Widget build(BuildContext context) {  // 每次调用 setState 时都会重新运行这个方法,例如在上面的 _incrementCounter 方法中。  //  // Flutter 框架已经针对快速重新运行构建方法进行了优化,  // 这样你就可以只重建任何需要更新的内容,而无需单独更改  // 小部件的实例。  return Scaffold(  appBar: AppBar(  // 尝试这个:尝试将这里的颜色更改为特定颜色(也许是  // Colors.amber?)然后触发热重载,看看 AppBar  // 在其他颜色保持不变的情况下改变颜色。  backgroundColor: Theme.of(context).colorScheme.inversePrimary,  // 在这里我们从 MyHomePage 对象获取值,该对象是  // 由 App.build 方法创建的,并用它来设置我们的 appbar 标题。  title: Text(widget.title),  ),  body: Center(  // Center 是一个布局小部件。它接受一个子项并将其  // 定位在父级的中间。  child: Column(  // Column 也是一个布局小部件。它接受一个子项列表并  // 将它们垂直排列。默认情况下,它的大小适应子项的  // 水平大小,并试图尽可能高于其父级。  //  // Column 有多种属性可控制它如何调整大小以及  // 如何定位其子项。在这里我们使用 mainAxisAlignment 来  // 垂直居中子项;这里的主轴是垂直轴,因为 Column 是垂直的(交叉轴则是  // 水平的)。  //  // 尝试这个:调用 "调试绘制"(在 IDE 中选择 "切换调试绘制"  // 操作,或者在控制台中按 "p"),以查看  // 每个小部件的框架。  mainAxisAlignment: MainAxisAlignment.center,  children: <Widget>[  const Text(  '你按下按钮的次数是:',  ),  Text(  '$_counter',  style: Theme.of(context).textTheme.headlineMedium,  ),  ],  ),  ),  floatingActionButton: FloatingActionButton(  onPressed: _incrementCounter,  tooltip: '增加',  child: const Icon(Icons.add),  ), // 这个尾随逗号使得自动格式化在构建方法中更好看。  );  }  
}

main() 函数

这是 Flutter 应用程序的入口。与许多编程语言类似,Flutter 程序从 main() 函数开始运行。

  • runApp():将传入的 MyApp 组件作为应用的根组件,并将其加载到屏幕上。
  • MyApp:是一个 StatelessWidget,即无状态的组件。

MyApp

class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}

StatelessWidget

MyApp 继承自 StatelessWidget,表示它是一个无状态的组件。无状态的组件在创建后不会改变。应用程序的 UI 是基于 Widget 构建的。

  • MaterialApp:这是一个 Flutter 提供的预定义 Widget,代表整个应用的根结构。它包含应用的配置,如 titletheme 以及 home
    • title:定义应用的标题,通常会显示在应用管理器中。
    • theme:设置应用的主题,比如颜色、字体等。ThemeData 包含应用的所有视觉属性。
    • home:指定应用的默认主页,在此示例中是 MyHomePage 组件。

MyHomePage

class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;State<MyHomePage> createState() => _MyHomePageState();
}

StatefulWidget

MyHomePage 是一个 StatefulWidget,它与 StatelessWidget 的不同之处在于它能够管理状态。在这个例子中,我们会点击按钮更新计数器,因此使用 StatefulWidget

  • title:这是从父组件 MyApp 中传递的属性,用于设置主页的标题。final 表示该值在 Widget 构建后不会改变。

_MyHomePageState

class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:'),Text('$_counter', style: Theme.of(context).textTheme.headlineMedium),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),),);}
}

状态管理与 setState()

  • _counter:这是状态变量,表示按钮点击的次数。
  • _incrementCounter():点击按钮时调用此方法,使用 setState() 更新状态。setState() 是 Flutter 中用于通知框架更新 UI 的方法。如果不调用 setState(),界面不会重新构建,用户也无法看到按钮点击次数的更新。

Scaffold

Scaffold 是 Flutter 中用于创建标准应用布局的 Widget,提供了 AppBar、Body、FloatingActionButton 等常用 UI 组件的支持。

  • AppBar:应用的顶栏(标题栏),显示页面的标题。
  • body:页面的主体部分,这里使用 Center 组件将内容居中显示。
    • Column:用于将内容垂直排列。这里有两个子组件:一个 Text 显示提示信息,另一个 Text 显示计数器的当前值。
  • floatingActionButton:浮动操作按钮(FAB),用于响应用户的交互行为,点击时调用 _incrementCounter() 方法。

代码运行流程概述

  1. 应用启动:Flutter 启动后,调用 main() 函数,加载 MyApp 组件。
  2. 构建 UIMyApp 返回一个 MaterialApp,该应用的主题和主页(MyHomePage)被初始化。
  3. 显示页面MyHomePage 调用其对应的 State_MyHomePageState,该类定义了计数器、构建方法,以及当按钮被按下时的响应逻辑。
  4. 状态更新:每次点击按钮时,_incrementCounter() 方法更新计数器,并通过 setState() 触发界面重绘,更新显示的计数值。

代码中涉及的核心 Widgets:

  • StatelessWidgetStatefulWidget:分别用于构建无状态和有状态的组件。
  • MaterialApp:定义应用的根结构,配置主题等属性。
  • Scaffold:提供标准应用布局结构。
  • AppBar:应用的标题栏。
  • Column:垂直排列子组件。
  • FloatingActionButton:用于处理用户点击的操作按钮。
  • setState():用于更新组件的状态,并触发界面重绘。

总结

通过这个简单的计数器示例,我们可以清晰地理解 Flutter 应用的基本结构:main() 函数初始化应用,MaterialApp 设置应用的主题和主页,StatelessWidget 用于构建无状态的 UI 组件,StatefulWidget 用于管理和更新状态。Flutter 的状态管理机制让 UI 更新变得非常简洁高效。

相关文章:

【Flutter】基础入门:代码基本结构

通过这个简单的 Flutter 示例程序&#xff0c;我们可以快速了解 Flutter 的代码结构&#xff0c;理解每个部分的作用。 import package:flutter/material.dart; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}…...

如何进行数据库缩容 | OceanBase应用实践

作者&#xff1a;关炳文&#xff0c;爱可生 DBA 团队成员&#xff0c;负责数据库相关技术支持。 本文详细介绍了OceanBase V3.2版的集群中&#xff0c;面对数据文件缩容的场景的一套缩容方案&#xff0c;作为大家的参考。 缩容场景 某银行运行的一套采用1-1-1架构的OceanBase…...

机器学习和深度学习的差别

定义和基本原理 机器学习&#xff1a; 定义&#xff1a;机器学习是一种让计算机自动从数据中学习规律和模式的方法&#xff0c;无需明确编程。它通过构建数学模型&#xff0c;利用已知数据进行训练&#xff0c;然后对新的数据进行预测或决策。基本原理&#xff1a;机器学习算…...

RAG拉满-上下文embedding与大模型cache

无论怎么选择RAG的切分方案&#xff0c;仍然切分不准确。 最近&#xff0c;anthropics给出了补充上下文的embedding的方案&#xff0c;RAG有了新的进展和突破。 从最基础的向量查询&#xff0c;到上下文embedding&#xff0c;再到rerank的测试准确度都有了明显的改善&#xf…...

前端学习---(2)CSS基础

CSS 用来干什么&#xff1f; CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。 css语法: 选择器{ 属性名: 属性值; 属性名: 属性值; } h1 {color: red;font-size: 5em; }h1: 选择器 color: 属性 冒号之前是属性&#xff0c;冒号之后是值。 font-size…...

Pandas常用计算函数

目录 排序函数 nlargest函数 nsmallest函数 sort_values函数 df.sort_values Series.sort_values 聚合函数 corr函数-相关性 min函数-最小值 max函数-最大值 mean函数-平均值 sum函数-求和 count函数-统计非空数据 std函数-标准偏差 quantile函数-分位数 排序函…...

C++ | Leetcode C++题解之第473题火柴拼正方形

题目&#xff1a; 题解&#xff1a; class Solution { public:bool makesquare(vector<int>& matchsticks) {int totalLen accumulate(matchsticks.begin(), matchsticks.end(), 0);if (totalLen % 4 ! 0) {return false;}int len totalLen / 4, n matchsticks.s…...

深度解析RLS(Recursive Least Squares)算法

目录 一、引言二、RLS算法的基本思想三、RLS算法的数学推导四、RLS算法的特点五、RLS算法的应用场景六、RLS算法的局限性七、总结 一、引言 在自适应滤波领域&#xff0c;LMS&#xff08;Least Mean Squares&#xff09;算法因其计算简单、实现方便而广受欢迎。然而&#xff0…...

Centos 7.9NFS搭建

原创作者&#xff1a;运维工程师 谢晋 Centos 7.9NFS搭建 NFS服务端安装客户机访问共享配置 NFS服务端安装 SSH连接系统登录到服务端安装nfs服务 # yum -y install nfs-utils2. 安装完成后&#xff0c;查看需要共享的目录&#xff0c;这边共享的是/home目录&#xff0c;如…...

Python库numpy之三

Python库numpy之三 # NumPy数组创建函数二维数组创建函数numpy.eye应用例子numpy.diag应用例子numpy.vander应用例子 # NumPy数组创建函数 二维数组创建函数 numpy.eye 词法&#xff1a;numpy.eye(N, MNone, k0, dtype<class ‘float’>, order‘C’, *, deviceNone, …...

postgresql 安装

一、下载 PostgreSQL: File Browser 下载地址 PostgreSQL: File Browser 上传到服务器,并解压 二、安装依赖 yum install -y perl-ExtUtils-Embed readline-devel zlib-devel pam-devel libxml2-devel libxslt-devel openldap-devel 创建postgresql 和目录 useradd …...

基于机器学习的天气数据分析与预测系统

天气预报是日常生活中非常重要的信息来源&#xff0c;能够帮助人们合理安排日程、预防自然灾害。随着数据科学和机器学习的快速发展&#xff0c;传统的天气预报方法逐渐向基于数据驱动的机器学习方法转变。本文将探讨如何构建一个基于机器学习的天气数据分析与预测系统&#xf…...

Java项目-基于Springboot的在线外卖系统项目(源码+说明).zip

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…...

ANSYS Workbench纤维混凝土3D

在ANSYS Workbench建立三维纤维混凝土模型可采用CAD随机几何3D插件建模后导入&#xff0c;模型包含球体粗骨料、圆柱体长纤维、水泥砂浆基体等不同组分。 在CAD随机几何3D插件内设置模型参数后运行&#xff0c;即可在AutoCAD内建立三维纤维混凝土模型&#xff0c;插件支持任意…...

【Vue】Vue3.0(十)toRefs()和toRef()的区别及使用示例

上篇文章&#xff1a;Vue】Vue&#xff08;九&#xff09;OptionsAPI与CompositionAPI的区别 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Vue专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年10月15日11点13分 文章目录 toRefs()和toRe…...

中科星图(GVE)——使用随机森林方法进行土地分类

目录 简介 函数 gve.Classifier.smileRandomForest(numberOfTrees,variablesPerSplit,minLeafPopulation,bagFraction,maxNodes,seed) 代码 结果 简介 使用随机森林方法进行土地分类的步骤如下&#xff1a; 数据准备&#xff1a;收集所需的土地分类数据&#xff0c;并对数…...

【蓝队技能】【C2流量分析】MSFCSSliver

蓝队技能 MSF&CS&Sliver 蓝队技能总结前言一、MSF1.1 流量分析1.2 特征提取 二、CS1.1 流量分析1.2 特征提取 二、Sliver1. 特征分析 总结 前言 不同C2工具的流量特征都有细微差别&#xff0c;学会分析方法后就可以进行分析 一、MSF 1.1 流量分析 MSF流量特征过于明显…...

不推荐使用Scilab作为MATLAB的开源替代

安装了Scilab2024.1.0&#xff0c;随便试了几分钟就发现有严重影响使用的Bug(也可能是就是这样设计的&#xff0c;有一个所谓的“暂停模式”)&#xff0c;复现步骤&#xff1a;主界面上点击“Scilab示例”按钮&#xff0c;打开“演示”窗口&#xff0c;点击左侧列表中的“多项式…...

C++智能指针及其应用

C11之后出现了 shared_ptr 和 unique_ptr&#xff0c;这两个类都是基于RAII技术进行设计的 RAII 利用对象生命周期来控制程序资源&#xff08;如内存&#xff0c;文件句柄&#xff0c;网络连接&#xff0c;互斥量等资源&#xff09;的技术&#xff0c;具体地说&#xff0c;就是…...

06 算法基础:算法的定义、表现形式(自然语言、伪代码、流程图)、五个特性(有穷性、确定性、可行性、输入、输出)、好算法的设计目标

目录 1 算法的定义 2 算法的三种表现形式 2.1 自然语言 2.2 伪代码 2.3 流程图 3 算法的五个特性 3.1 有穷性 3.2 确定性 3.3 可行性 3.4 输入 3.5 输出 4 好算法的设计目标 4.1 正确性 4.2 可读性 4.3 健壮性 4.4 通用性 4.5 高效率与低存储量 1 算法的定义 …...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...