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月发布第一个版本以来,目前 ...
随机推荐
- maven 将jar包推送到自己本机的maven库
mvn install:install-file -DgroupId=com.wdcloud.sdk -DartifactId=front-category-signed -Dversion=1.0. ...
- 笔记-Android中打开各种格式的文件(apk、word、excel、ppt、pdf、音视频、图片等)
打开后缀.apk的文件.即启动安装程序. //apkFilePath 文件路径 public void installAPK(String apkFilePath) { // 创建URI Uri ur ...
- WPF之DataGrid应用 翻页
前几天打算尝试下DataGrid的用法,起初以为应该很简单,可后来被各种使用方法和功能实现所折磨.网络上的解决方法太多,但也太杂.没法子,我只好硬着头皮阅览各种文献资料,然后不断的去尝试,总算小有成果 ...
- mysql锁2
死锁: 指两个事务或者多个事务在同一资源上相互占用,并请求对方所占用的资源,从而造成恶性循环的现象. 出现死锁的原因: 系统资源不足: 进程运行推进的顺序不当: 资源分配不当. 产生死锁的四个必要条件 ...
- linux+node.js+redis+mongodb+nginx环境的搭建
1.推荐购买阿里云服务器,使用Centos7.0的服务器版本,在创建完全系统并进入之后,第一步是更新服务器的相关组件 yum -y install gcc gcc-c++ openssl-dev ...
- mongodb查询的语法(大于,小于,大于或等于,小于或等于等等)
1 ) . 大于,小于,大于或等于,小于或等于 $gt:大于$lt:小于$gte:大于或等于$lte:小于或等于 例子: db.collection.find({ "field" ...
- 003_Git & Gitlab 使用指南
2016-02-23 | 9,129字 | 分类于 工具 | 3条评论 去年小组在从 SVN 和 TFS 迁移到 Git 的过程中整理了这份文档,面向的用户是对 Git 和 SV ...
- 在Windows .NET平台下使用Memcached (Enyim使用)
1. 启动并配置Memcached的服务端 1. 下载Memcached http://download.csdn.net/download/ful1021/7969231 2. 解压到任意目录下, ...
- jenkins使用4----git maven工具连接
搭建完git服务器 将jenkins服务器的的公钥传到git服务器的/home/git/.ssh的authorized_keys文件下 ssh端口2994 创建工程 配置完maven发现创建项目没有m ...
- nginx指定配置文件启动
/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf