flutter-StatelessWidget与StatefulWidget
StatelessWidget
和StatefulWidget
是flutter
的基础组件,日常开发中自定义Widget
都是选择继承这两者之一。
两者的区别在于状态的改变
,StatelessWidget
面向那些始终不变的UI控件,比如标题栏中的标题;而StatefulWidget
则是面向可能会改变UI状态的控件,比如有点击反馈的按钮。
StatelessWidget
就没什么好研究的了,StatefulWidget
的创建需要指定一个State
,在需要更新UI的时候调用setState(VoidCallback fn)
,并在VoidCallback
中改变一些变量数值等,组件会重新build
以达到刷新状态也就是刷新UI的效果。
官方有个StatefulWidget
的例子,通过点击按钮使屏幕上的Text
数值逐渐增长,可以很好理解StatefulWidget
的使用
1 |
class Counter extends StatefulWidget { |
解耦
上面的例子比较简单,当层级多、状态多的情况下,这样的代码会导致阅读性、扩展性较低的不友好情况发生。代码整洁、代码解耦在日常开发中都非常重要,官方也是非常注重这一点,也提供了思路,将按钮和文本控件从Counter
分离,Counter
负责更新状态,按钮和文本控件只负责显示,这样达到了解耦,保持代码整洁,扩展性也对应提高。
1 |
class CounterDisplay extends StatelessWidget { |
flutter-StatelessWidget与StatefulWidget的更多相关文章
- Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget
前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...
- 简单理解 Flutter 中 StatelessWidget 和 StatefulWidget
Widget 分为了两种类型,分别为 StatelessWidget 和 StatefulWidget. 顾名思义,StatelessWidget 就是无状态的组件,它只是作为一个不发生任何更新状态的 ...
- Flutter 即学即用系列博客——09 EventChannel 实现原生与 Flutter 通信(一)
前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生 ...
- Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信
背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么 ...
- Flutter 即学即用系列博客——06 超实用 Widget 集锦
本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...
- flutter - 01 基础介绍以及ListView
这篇主要讲flutter最基本的操作.我们从一个实例入手,先不需要知道它里面的每一行是什么意思,我会慢慢说. main.dart import 'package:flutter/material.da ...
- 【译】使用 Flutter 实现跨平台移动端开发
作者: Mike Bluestein | 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-developm ...
- Flutter 布局控件完结篇
本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Conta ...
- Flutter的原理及美团的实践
导读 Flutter是Google开发的一套全新的跨平台.开源UI框架,支持iOS.Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件.自从2017年5月发布第一个版本以来,目前 ...
随机推荐
- 转://WITH AS and materialize hints
WITH AS: 就是将一个子查询部分独立出来,有时候是为了提高SQL语句的可读性,有时候是为了提高SQL语句性能. 如果一个SQL语句中,某个表会被访问多次,而且每次访问的限制条件一样的话,就可以使 ...
- jenkins使用1----初始化设置
####一.基本设置 1.首先找到系统管理 2.再找到全局配置一把黄色的锁头 3.新增JDK.Maven等 别名随便 下面的值添加jdk在jenkins这台机器上的位置,如果没找到可以点击自动安装,并 ...
- Python+Pycharm—学习—pip
1.pip是干什么的? 2.pip怎么安装? 3.pip怎么用?
- AI Haar特征
Haar特征,也叫矩形特征,有四种特征(模板):边缘特征.线性特征.中心特征.对角线特征.每种模板都包含黑白两种区域. 模板的特征值=白色区域的像素和-黑色区域的像素和,反映的是图像的灰度变化情况. ...
- [MicroPython]TPYBoardv102超全DIY案例一览
TPYBoardv102是一款比较成熟和经典的MicroPython开发板,不仅适用于学习实验还能应用于大型的工业级开发,是MicroPython入门和研发的不二之选.下面我们就扒开v102的“层层外 ...
- Java8之lambda表达式
一.什么是lambda表达式? Lambda 是一个匿名函数,我们可以把 Lambda 表达式理解为是一段可以传递的代码(将代码像数据一样进行传递).可以写出更简洁.更灵活的代码.作为一种更紧凑的代码 ...
- Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
- 在WinForm应用程序中快速实现多语言的处理(2)--开发框架模块的整合
我在上篇随笔<在WinForm应用程序中快速实现多语言的处理>里面介绍了Winform开发中多语言的处理解决方案,整个多语言解决方案是以实际需求为驱动,以减少代码改动,高效处理为目的,通过 ...
- 腾讯首批 5000 人群,现在加入【FineUI总群】,极速体验!
腾讯首批 5000 人群,稀缺资源,绝无仅有,快来体验! 加群链接:http://shang.qq.com/wpa/qunwpa?idkey=e81f012f9920c25a77c4fd8b0c767 ...
- Node.js这么下去...
Node.js是基于javascript的.event驱动的单进程服务器(也能实现cluster模式,只要一个fork()语句,类似于C语言的进程创建). 所以大胆估计:Node.js会把很多大网站吞 ...