Flutter应用解析(一)

1、创建项目

1.1 新建

新建

1.2 选择Flutter SDK的位置

选择Flutter SDK的位置

1.3 项目名称

英文单词加下划线起名规范,其他默认即可。

起名

1.4 点击运行

运行

  • 发生报错显示我们的JAVA版本不符合
    JAVA版本不符合
1.5 更改版本设置

版本切换

1.6 再次启动项目

成功启动

2、分析页面代码

以下是lib/main.dart的源代码(为了阅读方便,删掉了注释):

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(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});final String title;State<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,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),),);}
}
2.1 导包
import 'package:flutter/material.dart'

此代码的作用是导入Material UI组件库。Material是一种标准的移动端和Web端的视觉设计语言,Flutter默认提供了一套丰富的Material风格的UI组件。

2.2 应用入口
void main() {runApp(const MyApp());
}//也可以写作, "=>"符号为Dart中单行函数或者方法的简写方式
// void main() => runApp(const MyApp());

在Flutter应用中main函数为应用程序的入口。main函数中调用了runApp方法,它的功能是启动Flutter应用。runApp接受一个Widget参数,在示例代码中接收了一个MyApp对象,MyApp()是Flutter应用的根组件。

2.3 应用结构
class MyApp extends StatelessWidget {/* 声明了一个常量构造函数,它使得Flutter在编译时就确定MyApp对象的结构,而不是在运行时动态创建。这可以提升一定性能,在编译时优化常量对象的创建过程,并且在多个地方使用同一个常量对象时可以减少内存使用。*/const MyApp({super.key});Widget build(BuildContext context) {return MaterialApp(// 应用名称title: 'Flutter Demo',// 主题设置theme: ThemeData(// 主题颜色colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),// 是否使用Material 3的设计规范useMaterial3: true,),// 应用首页路由home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}
  • MyApp类代表Flutter应用,继承了StatelessWidget类,即应用本身也是一个Widget;
  • 在Flutter中,大多数东西都是Widget,包括对齐(alignment)、填充(padding)、布局(layout)等属性;
  • Flutter调用组件的bulid方法构建页面,Wiget的主要功能是提供一个bulid方法描述如何构建UI(在bulid方法内部组合拼装、组合其他基础的Widget来实现);
  • home为Flutter应用的首页,也是一个Widget。
2.4 首页
2.4.1 MyHomePage
class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;State<MyHomePage> createState() => _MyHomePageState();
}

MyHomePage是Flutter应用的首页,其继承于StatefulWidget类,表明它是一个有状态的组件(Stateful Widget);除了有状态组件,还有无状态组件(Stateless Widget)。

  • Stateful Widget可以拥有状态,这些状态在Widget生命周期中是可以发生改变的,而Stateless Widget则是不可变的;
  • Stateful Widget至少由两个类组成:
    • 一个StatefulWidget类;
    • 一个State类;StatefulWidget类本身不发生改变,但State类中持有的状态在Widget生命周期中则可能发生变化。
2.4.2 _MyHomePageState
class _MyHomePageState extends State<MyHomePage> {// 用于记录按钮点击的总次数int _counter = 0;void _incrementCounter() {setState(() {_counter++;});}
  • 当按钮被点击时会调用此函数,该函数首先自增_counter,然后调用了setState方法,setState方法的作用是通知Flutter框架有状态发生了改变。
  Widget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,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),),);}
}

初始化完成后,Flutter框架会调用Widget的bulid方法来构建Widget树,最终将Widget树渲染到设备屏幕上。

  • Scaffold是Material组件库中提供的一个组件,它提供了默认的导航栏、标题和包含主屏幕Widget树的body属性;
  • body的组件树包含了一个Center属性,将所有子组件树对齐到屏幕中心;Center的子组件是Column,它的作用是将其子组件沿着屏幕垂直方向排列;此例中将两个Text组件垂直排列;
  • floatingActionButton代表页面右下角的带"+"的悬浮按钮,onPressed属性代表接受一个回调函数,在示例中调用一开始的_incrementCounter方法。

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

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

相关文章

【机器学习】朴素贝叶斯算法|商品评论情感分析案例介绍及代码实现

文章目录 朴素贝叶斯算法朴素贝叶斯算法介绍概率数学基础复习朴素贝叶斯算法-利用概率值进行分类的一种机器学习算法贝叶斯公式朴素贝叶斯算法拉普拉斯平滑系数 朴素贝叶斯API案例分析流程数据集代码实现运行结果 朴素贝叶斯算法 朴素贝叶斯算法介绍 概率数学基础复习 条件概…

linux中通过一个命令启动任何java的jar包

由于需要在linux中需要启动N多个jar包,以下是写的一个通用脚本: #!/bin/bash if [ $# -ne 2 ]; then echo "用法: $0 <命令> <模块名称>" exit 1 fi MODEL_NAME=$2 APP_NAME="${MODEL_NAME}" echo $APP_NAME JARFILE="${MODEL_NA…

架构设计笔记-11-未来信息综合技术

知识要点 云原生架构原则包括&#xff1a;服务化原则、弹性原则、可观测原则、韧性原则、所有过程自动化原则、零信任原则和架构持续演进原则。 区块链是一种按照时间顺序将数据区块以顺序相连的方式组合成的一种链式数据结构&#xff0c;并以密码学方式保证的不可篡改和不可…

有缺陷的 Java 代码:Java 开发人员最常犯的 10 大错误

Java 是一种复杂的编程语言&#xff0c;很长一段时间以来一直主导着许多生态系统。可移植性、自动垃圾回收及其温和的学习曲线是使其成为软件开发的绝佳选择的一些因素。但是&#xff0c;与任何其他编程语言一样&#xff0c;它仍然容易受到开发人员错误的影响。 本文探讨了 Jav…

CVE-2022-26965靶机渗透

​ 开启环境 ​ ​ 进入环境 ​ ​ 使用弱口令admin登录 ​ ​ 利用cms主题构造木马 ​ 需要将主题中的info.php文件修改&#xff0c;再打包成zip再上传&#xff0c;通过网络搜索找到Github中的Pluck CMS&#xff0c;进入后随便下载任一主题 https://github.com/sear…

c# using 声明进行资源管理

在 C# 8 中&#xff0c;using 声明引入了一种新的语法&#xff0c;称为 using 声明&#xff0c;它使得开发人员在处理资源时的代码更加简洁和清晰。主要的变化包括 使用声明 和 使用上下文&#xff08;using declaration&#xff09; 的引入。 使用语句的简化 在 C# 8 中&…

服务性能优化之mybatis-plus 开启与关闭 SQL 日志打印

Hello&#xff01;欢迎各位新老朋友来看小弟博客&#xff0c;祝大家事业顺利&#xff0c;财源广进&#xff01;&#xff01; 主题&#xff1a;mybatis-plus 开启与关闭 SQL 日志打印 第一&#xff1a;开启打印 Mybatis-plus 需要通过下面的方式开启控制台 SQL 日志打印 myba…

智能听诊器:宠物健康管理的革命

智能听诊器不仅仅是一个简单的监测工具&#xff0c;它代表了宠物健康管理的一次革命。通过收集和分析宠物的生理数据&#xff0c;智能听诊器能够帮助宠物主人和医生更好地理解宠物的健康需求&#xff0c;从而提供更加个性化的护理方案。 智能听诊器通过高精度的传感器&#xf…

和鲸科技创始人范向伟:拐点即将来临,AI产业当前的三个瓶颈

在科技迅猛发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;无疑已经成为引领新一轮产业革命的核心动力之一。全球企业纷纷拥抱AI技术&#xff0c;试图借助其变革力量在竞争中突围&#xff0c;然而业界对AI产业化的拐点何时来临却众说纷纭。毕竟AI技术从实验室到商业…

4K变倍镜头特点

1、高分辨率成像&#xff1a; ① 能够呈现清晰、细腻的图像&#xff0c;可清晰快速地识别出被测物体的微小细节、特征以及潜在的缺陷等。例如在芯片外观瑕疵检测中&#xff0c;能清晰地分辨出芯片上的刮痕、污渍、破损、引脚缺失等问题。 ② 相比传统的变倍镜头&#xff0c;在…

【VUE】Vue的diff算法和React的diff算法

React和Vue都使用了虚拟DOM来进行高效的页面更新&#xff0c;但它们在实现细节上有一些差异。下面是React和Vue的diff算法的异同点&#xff1a; 异同点&#xff1a; 目标&#xff1a;React和Vue的diff算法的目标都是尽量减少DOM操作的次数&#xff0c;提高页面更新的性能。虚…

LabVIEW提高开发效率技巧----队列使用

在LabVIEW开发中&#xff0c;队列是实现并行处理、数据传递和任务调度的关键机制之一&#xff0c;合理使用队列可以有效提高程序性能并避免内存问题。结合队列长度限制和其他队列相关技巧&#xff0c;以下是队列使用的详细说明&#xff1a; 1. 队列长度限制 限制队列的长度可以…

全面讲解C++

数据类型 1.1 基本数据类型 1.1.1 整型&#xff08;Integer Types&#xff09; 整型用于表示整数值&#xff0c;分为以下几种类型&#xff1a; int&#xff1a;标准整数类型&#xff0c;通常为4字节&#xff08;32位&#xff09;。short&#xff1a;短整型&#xff0c;通常…

Python网络爬虫技术

Python网络爬虫技术详解 引言 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;又称网络蜘蛛&#xff08;Web Spider&#xff09;或网络机器人&#xff08;Web Robot&#xff09;&#xff0c;是一种按照一定规则自动抓取互联网信息的程序或脚本。它们通过遍历网页链…

JDK命令行工具

JDK命令行工具 1. jps&#xff1a;虚拟机进程状况工具 显示所有hotspot虚拟机进程 2. jstat&#xff1a;虚拟机统计信息监视工具 收集HotSpot各方面的运行数据&#xff0c;例如类装载&#xff0c;内存&#xff0c;垃圾收集&#xff0c;JIT编译等数据 3. jinfo&#xff1a;…

量子数字签名概述

我们都知道&#xff0c;基于量子力学原理研究密钥生成和使用的学科称为量子密码学。其内容包括了量子密钥分发、量子秘密共享、量子指纹识别、量子比特承诺、量子货币、秘密通信扩展量子密钥、量子安全计算、量子数字签名、量子隐性传态等。虽然各种技术发展的状态不同&#xf…

FreeRTOS学习总结

背景&#xff1a;在裸机开发上&#xff0c;有时候我们需要等待某个信号或者需要延迟时&#xff0c;CPU的运算是白白浪费掉了的&#xff0c;CPU的利用率并不高&#xff0c;我们希望当一个函数在等待的时候&#xff0c;可以去执行其他内容&#xff0c;提高CPU的效率&#xff0c;同…

linux使用nmcli 管理wifi的命令

在 Linux 系统中&#xff0c;nmcli 是 NetworkManager 的命令行工具&#xff0c;常用于管理网络连接&#xff0c;包括 WiFi。下面是一些常见的使用 nmcli 管理 WiFi 的命令。 1. 显示所有可用的 WiFi 网络 nmcli dev wifi list这个命令会列出当前可以扫描到的 WiFi 网络及其信…

windows修改文件最后修改时间

一、需要修改日期的文件 背景:有时候我们需要做一些文件定期删除的操作,但是测试时候并不一定有符合测试的文件,这时候就需要可以方便的修改文件的最后修改时间。 系统环境:windows 测试文件:如上 修改时间方式:windows 脚本。 二、测试脚本 (1) 脚本 # 指定文件路径 …

自然语言处理:第五十三章 Ollama

代码&#xff1a; ollama/ollama: Get up and running with Llama 3.1, Mistral, Gemma 2, and other large language models. (github.com) 官网&#xff1a; Ollama 写在前面: 笔者更新不易&#xff0c;希望走过路过点个关注和赞&#xff0c;笔芯!!! 写在前面: 笔者更新不易…