StatelessWidgetStatefulWidgetflutter的基础组件,日常开发中自定义Widget都是选择继承这两者之一。

两者的区别在于状态的改变StatelessWidget面向那些始终不变的UI控件,比如标题栏中的标题;而StatefulWidget则是面向可能会改变UI状态的控件,比如有点击反馈的按钮。

StatelessWidget就没什么好研究的了,StatefulWidget的创建需要指定一个State,在需要更新UI的时候调用setState(VoidCallback fn),并在VoidCallback中改变一些变量数值等,组件会重新build以达到刷新状态也就是刷新UI的效果。

官方有个StatefulWidget的例子,通过点击按钮使屏幕上的Text数值逐渐增长,可以很好理解StatefulWidget的使用

复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
class Counter extends StatefulWidget {
// This class is the configuration for the state. It holds the
// values (in this nothing) provided by the parent and used by the build
// method of the State. Fields in a Widget subclass are always marked "final". @override
_CounterState createState() => new _CounterState();
} class _CounterState extends State<Counter> {
int _counter = 0; void _increment() {
setState(() {
// This call to setState tells the Flutter framework that
// something has changed in this State, which causes it to rerun
// the build method below so that the display can reflect the
// updated values. If we changed _counter without calling
// setState(), then the build method would not be called again,
// and so nothing would appear to happen.
_counter++;
});
} @override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance
// as done by the _increment method above.
// The Flutter framework has been optimized to make rerunning
// build methods fast, so that you can just rebuild anything that
// needs updating rather than having to individually change
// instances of widgets.
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: _increment,
child: new Text('Increment'),
),
new Text('Count: $_counter'),
],
);
}
}

解耦

上面的例子比较简单,当层级多、状态多的情况下,这样的代码会导致阅读性、扩展性较低的不友好情况发生。代码整洁、代码解耦在日常开发中都非常重要,官方也是非常注重这一点,也提供了思路,将按钮和文本控件从Counter分离,Counter负责更新状态,按钮和文本控件只负责显示,这样达到了解耦,保持代码整洁,扩展性也对应提高。

复制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
class CounterDisplay extends StatelessWidget {
CounterDisplay({this.count}); final int count; @override
Widget build(BuildContext context) {
return new Text('Count: $count');
}
} class CounterIncrementor extends StatelessWidget {
CounterIncrementor({this.onPressed}); final VoidCallback onPressed; @override
Widget build(BuildContext context) {
return new RaisedButton(
onPressed: onPressed,
child: new Text('Increment'),
);
}
} class Counter extends StatefulWidget {
@override
_CounterState createState() => new _CounterState();
} class _CounterState extends State<Counter> {
int _counter = 0; void _increment() {
setState(() {
++_counter;
});
} @override
Widget build(BuildContext context) {
return new Row(children: <Widget>[
new CounterIncrementor(onPressed: _increment),
new CounterDisplay(count: _counter),
]);
}
}

flutter-StatelessWidget与StatefulWidget的更多相关文章

  1. Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget

    前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...

  2. 简单理解 Flutter 中 StatelessWidget 和 StatefulWidget

    Widget 分为了两种类型,分别为 StatelessWidget 和 StatefulWidget. 顾名思义,StatelessWidget 就是无状态的组件,它只是作为一个不发生任何更新状态的 ...

  3. Flutter 即学即用系列博客——09 EventChannel 实现原生与 Flutter 通信(一)

    前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生 ...

  4. Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信

    背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么 ...

  5. Flutter 即学即用系列博客——06 超实用 Widget 集锦

    本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...

  6. flutter - 01 基础介绍以及ListView

    这篇主要讲flutter最基本的操作.我们从一个实例入手,先不需要知道它里面的每一行是什么意思,我会慢慢说. main.dart import 'package:flutter/material.da ...

  7. 【译】使用 Flutter 实现跨平台移动端开发

    作者: Mike Bluestein   | 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-developm ...

  8. Flutter 布局控件完结篇

    本文对Flutter的29种布局控件进行了总结分类,讲解一些布局上的优化策略,以及面对具体的布局时,如何去选择控件. 1. 系列文章 Flutter 布局详解 Flutter 布局(一)- Conta ...

  9. Flutter的原理及美团的实践

    导读 Flutter是Google开发的一套全新的跨平台.开源UI框架,支持iOS.Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件.自从2017年5月发布第一个版本以来,目前 ...

随机推荐

  1. maven 将jar包推送到自己本机的maven库

    mvn install:install-file -DgroupId=com.wdcloud.sdk -DartifactId=front-category-signed -Dversion=1.0. ...

  2. 笔记-Android中打开各种格式的文件(apk、word、excel、ppt、pdf、音视频、图片等)

    打开后缀.apk的文件.即启动安装程序. //apkFilePath 文件路径 public void installAPK(String apkFilePath) { // 创建URI Uri ur ...

  3. WPF之DataGrid应用 翻页

    前几天打算尝试下DataGrid的用法,起初以为应该很简单,可后来被各种使用方法和功能实现所折磨.网络上的解决方法太多,但也太杂.没法子,我只好硬着头皮阅览各种文献资料,然后不断的去尝试,总算小有成果 ...

  4. mysql锁2

    死锁: 指两个事务或者多个事务在同一资源上相互占用,并请求对方所占用的资源,从而造成恶性循环的现象. 出现死锁的原因: 系统资源不足: 进程运行推进的顺序不当: 资源分配不当. 产生死锁的四个必要条件 ...

  5. linux+node.js+redis+mongodb+nginx环境的搭建

    1.推荐购买阿里云服务器,使用Centos7.0的服务器版本,在创建完全系统并进入之后,第一步是更新服务器的相关组件    yum -y install gcc gcc-c++ openssl-dev ...

  6. mongodb查询的语法(大于,小于,大于或等于,小于或等于等等)

    1 ) . 大于,小于,大于或等于,小于或等于 $gt:大于$lt:小于$gte:大于或等于$lte:小于或等于 例子: db.collection.find({ "field" ...

  7. 003_Git & Gitlab 使用指南

    2016-02-23   |   9,129字   |   分类于 工具  |   3条评论 去年小组在从 SVN 和 TFS 迁移到 Git 的过程中整理了这份文档,面向的用户是对 Git 和 SV ...

  8. 在Windows .NET平台下使用Memcached (Enyim使用)

    1. 启动并配置Memcached的服务端 1. 下载Memcached  http://download.csdn.net/download/ful1021/7969231 2. 解压到任意目录下, ...

  9. jenkins使用4----git maven工具连接

    搭建完git服务器 将jenkins服务器的的公钥传到git服务器的/home/git/.ssh的authorized_keys文件下 ssh端口2994 创建工程 配置完maven发现创建项目没有m ...

  10. nginx指定配置文件启动

    /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf