Flutter入门之有状态组件
来源:互联网 发布:华为分享网络wifi密码 编辑:程序博客网 时间:2024/05/29 02:40
StatefulComponent使用方法入门
在上一篇Flutter入门之无状态组件中我们讲到了无状态组件
,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件被build的时候它们就使用这些不可变的数据来构建自己的UI。
为了构建更加复杂且可和用户产生交互的组件,在flutter中提供了StatefulComponents
来实现这种需求。
下面来看一个简单的例子‘点击按钮,并在按钮文字上不断更新点击的次数’。
import 'package:flutter/material.dart';import 'flat_color_button.dart';class Counter extends StatefulComponent { //(1) _CounterState createState() => new _CounterState(); //(2)}class _CounterState extends State<Counter> { //(3) int _count = 0; //(3) void _increment() { setState(() { //(4) ++_count; }); } Widget build(BuildContext context) { return new Container( decoration: new BoxDecoration(backgroundColor: Colors.grey[100]), child: new Center( child: new RaisedButton( onPressed: _increment, child: new Text('click count : ${_count}')))); }}main() { runApp(new MaterialApp( title: 'counter', routes: {'/': (RouteArguments args) => new Counter()}));}
运行结果如下:
代码解释如下:
- (1)你可能觉得有些奇怪,为什么
StatefulComponent
和State
要分开使用而不是集成在StatefulComponent
内部,这是因为它们两个在程序的运行过程中有各自的生命周期,StatefulComponent
仅用来表示控件的表现形式随时可能发生改变,而State
的生命周期存在与两次build方法之间。 - (2)当框架得知组件是
StatefulComponent
的时候回去调用createState()
来获得其组件内容。 - (3)
State
内部存储可变状态值,并通过实现build
来构建组件。 - (4)这里非常重要,当在State内部改变任何子控件需要的变量时,都需要使用setState,当调用了setState后,底层框架会把当前控件标记为一个‘脏’组件,接着会在必要的时刻重新调用组件的build方法来刷新其子控件,由此起到刷新的作用
StatefulComponent的基本用法就是这样,再复杂的控件设计,只要遵循以上的规范,就能有良好的用户体验。
0 0
- Flutter入门之有状态组件
- Flutter入门之无状态组件
- Flutter进阶—创建有状态控件
- Flutter从入门到进阶
- Flutter学习之旅(三)----Flutter常见问题FAQ,看完之后不再是Flutter小白
- Flutter基础—开发环境与入门
- Flutter基础—常用控件之容器
- Flutter基础—定位对齐之对齐
- Flutter基础—定位对齐之填充
- Flutter进阶—质感设计之进度条
- Flutter进阶—质感设计之卡片
- OpenStack入门 之 基本组件
- AngularJS入门之组件化
- React 有状态组件及 key 属性的应用
- Flutter学习之旅(四)----Flutter开发语言Dart的基础语法
- 有状态as无状态之线程问题
- EJB3.0入门经典(笔记)-有状态会话Bean
- PHP入门案例之获取服务器状态
- android 5.0 Launcher3,Gallery2中响应按键,实现翻页效果
- Leetcode 第168题 Excel Sheet Column Title
- 奇点临近?人工智能v.s.人脑智能
- Aptana studio 安装完启动时中出现Failed to load the JNI shared library如何解决?
- Jmeter--google plugin插件监控被测系统资源方法
- Flutter入门之有状态组件
- 动态库 dlopen dlsm dlclose dlerror
- 七个你无法忽视的Git使用技巧
- 秒杀多线程第九篇---经典线程同步总结 关键段 事件 互斥量 信号量
- ios计算每个年月的天数
- IOS图层Layer学习笔记(六)—— CAScrollLayer
- 波浪子序列(最大上升下降子序列)
- iis URL 重写
- Java实现堆的封装,进行插入,调整,删除堆顶以完成堆排序实例