Flutter之build 方法详解
前言
我们创建一个Flutter程序,入口文件内容如下
//导包,此行代码作用是导入了 Material UI 组件库。Material (opens new window)是一种标准的移动端和 web 端的视觉设计语言, Flutter默认提供了一套丰富的 Material 风格的 UI 组件。 import 'package:flutter/material.dart';//应用入口 void main() {runApp(const MyApp()); }/// 在 Flutter 中,大多数东西都是 widget(后同“组件”或“部件”),包括对齐(alignment)、填充(padding)和布局(layout)等,它们都是以 widget 的形式提供。 class MyApp extends StatelessWidget {const MyApp({super.key});@override///Flutter 在构建页面时,会调用组件的build方法,widget 的主要工作是提供一个 build()方法来描述如何构建 UI 界面(通常是通过组合、拼装其它基础 widget)。Widget build(BuildContext context) {///MaterialApp 是 Material 库中提供的 Flutter APP 框架,通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个 widget。return MaterialApp(//用于名称title: 'Flutter Demo',//主题theme: ThemeData(primarySwatch: Colors.blue,),//home 为 Flutter 应用的首页,它也是一个 widget。home: const MyHomePage(title: 'Flutter Demo Page'),);} }//首页 它继承自StatefulWidget类,表示它是一个有状态的组件(Stateful widget) class MyHomePage extends StatefulWidget {//required 代表着title必须传入const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {//setState方法的作用是通知 Flutter 框架,有状态发生了改变,Flutter 框架收到通知后,会执行build方法来根据新的状态重新构建界面, Flutter 对此方法做了优化,使重新执行变的很快,所以你可以重新构建任何需要更新的东西,而无需分别去修改各个 widgetsetState(() {_counter++;});}@overrideWidget build(BuildContext context) {//Scaffold 是 Material 库中提供的页面脚手架,它提供了默认的导航栏、标题和包含主屏幕widget树(后同“组件树”或“部件树”)的body属性,组件树可以很复杂。路由默认都是通过Scaffold创建。return Scaffold(//顶部导航栏appBar: AppBar(// 这里,我们从App.build方法创建的MyHomePage对象中获取值,并使用它设置appbar标题。title: Text(widget.title),),//Center 可以将其子组件树对齐到屏幕中心,Center只能有一个孩子body: Center(//Column的作用是将其所有子组件沿屏幕垂直方向依次排列,Column可以有多个孩子,孩子用[]包裹起来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),),);} } |
_MyHomePageState
类是MyHomePage
类对应的状态类。我们发现MyHomePage
和MyApp
类不同, MyHomePage
类中并没有build
方法,取而代之的是,build
方法被挪到了_MyHomePageState
方法中,那么为什么要这样写呢?
原因
如果将build()
方法放在StatefulWidget
中则会有两个问题:
状态访问不便
如果我们的StatefulWidget
有很多状态,而每次状态改变都要调用build
方法,由于状态是保存在 State 中的,如果build
方法在StatefulWidget
中,那么build
方法和状态分别在两个类中,那么构建时读取状态将会很不方便!试想一下,如果真的将build
方法放在 StatefulWidget 中的话,由于构建用户界面过程需要依赖 State,所以build
方法将必须加一个State
参数,大概是下面这样:
Widget build(BuildContext context, State state){//state.counter...} |
这样的话就只能将 State 的所有状态声明为公开的状态,这样才能在 State 类外部访问状态!但是,将状态设置为公开后,状态将不再具有私密性,这就会导致对状态的修改将会变的不可控。但如果将build()
方法放在 State 中的话,构建过程不仅可以直接访问状态,而且也无需公开私有状态,这会非常方便。
继承StatefulWidget
不便
例如,Flutter 中有一个动画widget的基类AnimatedWidget
,它继承自StatefulWidget
类。AnimatedWidget
中引入了一个抽象方法build(BuildContext context)
,继承自AnimatedWidget
的动画widget都要实现这个build
方法。现在设想一下,如果StatefulWidget
类中已经有了一个build
方法,正如上面所述,此时build
方法需要接收一个state对象,这就意味着AnimatedWidget
必须将自己的 State 对象(记为_animatedWidgetState)提供给其子类,因为子类需要在其build
方法中调用父类的build
方法,代码可能如下:
class MyAnimationWidget extends AnimatedWidget{@overrideWidget build(BuildContext context, State state){//由于子类要用到AnimatedWidget的状态对象_animatedWidgetState,//所以AnimatedWidget必须通过某种方式将其状态对象_animatedWidgetState//暴露给其子类 super.build(context, _animatedWidgetState)}} |
这样很显然是不合理的,因为
AnimatedWidget
的状态对象是AnimatedWidget
内部实现细节,不应该暴露给外部。- 如果要将父类状态暴露给子类,那么必须得有一种传递机制,而做这一套传递机制是无意义的,因为父子类之间状态的传递和子类本身逻辑是无关的。
相关文章:
Flutter之build 方法详解
前言 我们创建一个Flutter程序,入口文件内容如下 //导包,此行代码作用是导入了 Material UI 组件库。Material (opens new window)是一种标准的移动端和 web 端的视觉设计语言, Flutter默认提供了一套丰富的 Material 风格的 UI 组件。 impo…...
开源呼叫中心系统与商业软件的对比
开源呼叫中心系统与商业软件的对比 作者:FreeIPCC 在当今的商业环境中,呼叫中心系统已成为企业与客户之间沟通的重要桥梁。而在选择呼叫中心系统时,企业面临着两种主要的选择:开源呼叫中心系统和商业软件。这两种系统各有其独特的…...
【人工智能】——matplotlib教程
文章目录 1.matplotlib简介2.基本绘图功能2.1给图形添加辅助功能2.2在一个坐标系中绘制多个图像2.3多个坐标系显示图像 3.常见图像绘制 1.matplotlib简介 matplotlib 是一个用于创建二维图表和数据可视化的 Python 库,它提供了一种类似于 MATLAB 的绘图接口。matplo…...
【c++ gtest】使用谷歌提供的gtest和抖音豆包提供的AI大模型来对代码中的函数进行测试
【c gtest】使用谷歌提供的gtest和抖音豆包提供的AI大模型来对代码中的函数进行测试 下载谷歌提供的c测试库在VsCode中安装抖音AI大模型找到c项目文件夹,使用VsCode和VS进行双开生成gtest代码进行c单例测试 下载谷歌提供的c测试库 在谷歌浏览器搜索github gtest, 第…...
使用Angular构建动态Web应用
💖 博客主页:瑕疵的CSDN主页 💻 Gitee主页:瑕疵的gitee主页 🚀 文章专栏:《热点资讯》 使用Angular构建动态Web应用 1 引言 2 Angular简介 3 安装Angular CLI 4 创建Angular项目 5 设计应用结构 6 创建组件…...
25届电信保研经验贴(自动化所)
个人背景 学校:中九 专业:电子信息工程 加权:92.89 绩点:3.91/4.0 rank:前五学期rank2/95,综合排名rank1(前六学期和综合排名出的晚,实际上只用到了前五学期) 科研…...
大数据-190 Elasticsearch - ELK 日志分析实战 - 配置启动 Filebeat Logstash
点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…...
不同类型的 LED 驱动电源在检测方法上有哪些不同?-纳米软件
1.传统 LED 驱动电源检测方法: 通常会提取 LED 驱动电源性能指标参数中较为重要的几个因子,如电压稳定性、电流波动范围等。利用诸如 k-means 聚类分析方法,实现对不同厂家、使用寿命不同的 LED 驱动电源快速有效的分类2。这种方法主要是通过…...
android 生成json 文件
在做网络请求的时候需要生成一个如下的json文件: {"messages": [{"role": "user","content": [{"type": "image_base64","image_base64": "pp"},{"type": "text&…...
C++新增的类功能和可变参数模板
C新增的类功能和可变参数模板 新的类功能默认成员函数 可变参数模板模拟实现emplace_back 🌏个人博客主页: 个人主页 新的类功能 默认成员函数 原来C类中,有6个默认成员函数: 构造函数析构函数拷贝构造函数拷贝赋值重载取地址…...
redo log 日志 与 undo log 日志工作原理
目录标题 1. redo log 日志2. undo log 日志3.总结 1. redo log 日志 redo log日志是 MySQL 数据中的重要日志之一,其本质是物理日志,存放于 数据库的数据目录中 ,名称为: ib_logfile 。它的功能主要是用于存放脏数据的日志&…...
go语言结构体与json数据相互转换
本博文简要介绍go语言结构体如何与json格式化字符串相互转换。 文章目录 go语言结构体转换为json数据json数据转换为go结构体 go语言结构体转换为json数据 type Person struct {Name string json:"name"Age int json:"age"Hobbies []strin…...
jenkins 自动化部署Springboot 项目
一、安装docker 1.更新yum命令 yum -y update2.查看机器有残留的docker服务,有就卸载干净 查看docker 服务 rpm -qa |grep docker卸载docker sudo yum remove docker-ce docker-ce-cli containerd.io sudo rm -rf /var/lib/docker sudo rm -rf /var/lib/contai…...
使用xml发送国际短信(smspro)【吉尔吉斯斯坦】
//使用xml格式发送国外短信验证码【吉尔吉斯斯坦】官网:https://smspro.nikita.kg/ public function api_test($data,$user){$url "http://smspro.nikita.kg/api/message";$code 123456 ;$content Your verification code 123456, this verification …...
springmvc-springsecurity-redhat keycloak SAML2 xml实现
环境准备: jdk17 redhat keycloak 24 spring security 6 参照文档: 红帽KeyCloak:Red Hat build of Keycloak | Red Hat Product Documentation 入门指南:入门指南 | Red Hat Product Documentation 服务器管理指南&#x…...
【K8S系列】Kubernetes Pod节点CrashLoopBackOff 状态及解决方案详解【已解决】
在 Kubernetes 中,Pod 的状态为 CrashLoopBackOff 表示某个容器在启动后崩溃,Kubernetes 尝试重启该容器,但由于持续崩溃,重启的间隔时间逐渐增加。下面将详细介绍 CrashLoopBackOff 状态的原因、解决方案及相关命令的输出解释。 …...
Linux: Shell编程入门
Shell 编程入门 1 ) Shell 概念 shell 是 在英语中 壳, 外壳的意思可以把它想象成嵌入在linux这样的操作系统里面的一个微型的编程语言不像C语言, C 或 Java 等编程语言那么完整,它可以帮我们完成很多自动化任务例如保存数据监测系统的负载等等,我们同样…...
python爬虫实战案例——抓取B站视频,不同清晰度抓取,实现音视频合并,超详细!(内含完整代码)
文章目录 1、任务目标2、网页分析3、代码编写 1、任务目标 目标网站:B站视频(https://www.bilibili.com/video/BV1se41117WP/?vd_sourcee8e376ccbc5aa4cfd88e6a7917adfd1a),用于本文测验 要求:抓取该网址下的视频&…...
容灾与云计算概念
基础知识容灾备份——备份技术系统架构与备份网络方案-CSDN博客 SAN,是storage area network的简称,翻译过来就是存储区域网络。 顾名思义,SAN首先是一个网络,其次它是关于存储的,区域则是指服务器和存储资…...
基于 Python 的自然语言处理系列(44):Summarization(文本摘要)
在这一部分中,我们将探讨如何使用 Transformer 模型将长文档压缩为摘要,这个任务被称为文本摘要。文本摘要是 NLP 领域中最具挑战性的任务之一,因为它需要理解长篇文本并生成连贯的总结,捕捉文档中的核心主题。然而,当…...
RabbitMQ安装部署
安装Erlang 由于RabbitMQ是用Erlang语言编写的,所以在安装RabbitMQ之前需要安装Erlang 安装依赖 [rootpro-ex ~]yum install make gcc gcc-c build-essential openssl openssl-devel unixODBC unixODBC-devel kernel-devel m4 ncurses-devel设置Eralng的存储库 […...
智联招聘×Milvus:向量召回技术提升招聘匹配效率
01. 业务背景 在智联招聘平台,求职者和招聘者之间的高效匹配至关重要。招聘者可以发布职位寻找合适的人才,求职者则通过上传简历寻找合适的工作。在这种复杂的场景中,我们的核心目标是为双方提供精准的匹配结果。在搜索推荐场景下,…...
unplugin-auto-import 库作用
unplugin-auto-import是一个 Vite、Webpack 和 Rollup 的插件。 一、自动导入模块 1. 减少手动导入 在 JavaScript 和 TypeScript 项目中,它可以自动检测并导入常用的模块和函数,无需手动在每个文件中进行导入操作。这大大减少了代码中的重复性导入语…...
【Multisim14.0正弦波>方波>三角波】2022-6-8
缘由有没有人会做啊Multisim14.0-其他-CSDN问答参考方波、三角波、正弦波信号产生 - 豆丁网...
vue3纯前端验证码示例
前言 验证码的用途:通过要求用户输入一串难以被机器自动识别的字符或图像,有效阻止恶意用户或脚本通过暴力破解方式尝试登录账户。验证码的分类:常见的验证码有短信、文本、图形等,安全度越高,依赖的插件或服务也越多…...
招聘程序员
全栈总监❤️golang❤️UI设计师 ☀️前端☀️Nodejs工☀️平面设计☀️PHP工 ☀️安卓❤️Flutter❤️运维☀️爬虫 公司福利: ☃️ 带薪年假、年终奖、13k-18k薪 🏩 内宿 2人/间或外宿可补助 💵 转正绩效 ✨节日礼金:生日礼金…...
Android 判断手机放置的方向
#1024程序员节|征文# 文章目录 前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 需求 老板:我有个手持终端,不能让他倒了,当他倒或者倾斜的时候要发出报警; 程序猿:我这..... 老板…...
Telegram机器人的手机部署
目的 一直有读 epub 电子书的习惯,摘录段落复制下来段落很难看,把自己写的排版器的逻辑复制下来,写成了一个排版机器人所有发给机器人的文字,都会经过排版,后转发到读书频道 前提 本来最好方法是直接把机器人架在服…...
ffmpeg视频滤镜: 色温- colortemperature
滤镜简述 colortemperature 官网链接 》 FFmpeg Filters Documentation 这个滤镜可以调节图片的色温,色温值越大显得越冷,可以参考一下下图: 咱们装修的时候可能会用到,比如选择灯还有地板的颜色的时候,选暖色调还是…...
Django+Vue全栈开发项目入门(二)
Vue是一款用于构建用户界面的JavaScript渐进式框架,它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、响应式的、组件化的编程模型,有助于高效地开发用户界面。 环境准备 安装Node.js:Vue项目的构建和运行依赖于Node…...
网站备案后怎么做实名认证/播放量自助下单平台
在学习UCOS过程中,想通过串口中断将接收到的数据放到消息队列中去,编写代码如下:#include "led.h"#include "delay.h"#include "key.h"#include "sys.h"#include "usart.h"#include "…...
如何在赌博网站做代理/苏州疫情最新消息
Android Studio原生支持使用Gradle来构建项目,使用动态语言Groovy定义项目构建的过程,避免了build.xml文件繁琐的定义。然而使用的时候,却有着巨大的缺陷。由于Android Studio在升级的时候,可能会伴随着Gradle版本的升级,Gradle就…...
网站建设基本知识/百度账号管理中心
linux 环境变量 ******************************* linux环境创建过程:用户进入系统后,会先读取全局配置文件,再读取用户主目录下的配置文件 shell会话类型:login shell、non-login shell login shell文件加载流程:先…...
温州网站设计服务商/黄页网
Firebug的Console API 每个用Firefox加载的页面,Firebug都添加了一个全局变量console,通过这个变量的若干方法,你可以通过脚本向控制台输出各种调试信息。 console.log(object[, object, ...]) 往控制台写一条信息,可以有多个参数…...
合肥网站建设新闻营销/长沙seo优化排名
前段时间 , 在脉脉上看见某95后阿里P7晒出工资单,是真的给我酸了…… 没办法回去想想 , 还是说狠补一下技术吧。 按照之前的经验来看 , Java 一面基本上都是基础题,同样是 CURD 的话,谁更熟练要谁,比如下面这个Java面试手册&…...
python做的网站如何部署/互联网行业最新资讯
功能说明:列出目录内容。语 法:ls [-1aAbBcCdDfFgGhHiklLmnNopqQrRsStuUvxX][-I <范本样式>][-T <跳格字数>][-w <每列字符数>][--block-size<区块大小>][--color<使用时机>][--format<列表格式>][--full-time][…...