如需转载,请注明出处:Flutter学习笔记(14)--StatefulWidget简单使用

今天上班没那么忙,突然想起来我好像没StatefulWidget(有状态组件)的demo,闲来无事,写一个简单的学习学习,前面我们有说过,Flutter不同于Android。Flutter是只绘制一帧,这一帧会绘制整个widget树,也就是说一次绘制整个界面,那么想一下,如果想要页面内容发生变化,是不是要重新绘制界面呢?如果需要重新绘制的,又怎么样来触发重新绘制的机制呢?先看下demo的代码吧,很简单的!

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new MyAppState();
} } class MyAppState extends State<MyApp> {
var _textContent = 'welcome to flutter word';
void _changeTextContent(){
setState(() {
_textContent = 'what is up man???';
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
theme: new ThemeData(
primaryColor: Colors.white,
),
debugShowCheckedModeBanner: false,
title: 'demo',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Demo'),
leading: Icon(Icons.menu,size: ,),
actions: <Widget>[
Icon(Icons.search,size: ,)
],
),
body: new Center(
child: new Text(_textContent),
),
floatingActionButton: new FloatingActionButton(onPressed: _changeTextContent,child: new Icon(Icons.adjust),),
),
);
}
}

StatefulWidget是有状态的组件,意思不是说StatefulWidget类本身是可变的,实际上StatefulWidget类本身也是不变的,而StatefulWidget持有的state状态是在widget整个生命周期内一直存在的,也是因为有了这个state状态,我们就可以通知Flutter框架某一个状态发生了变化,Flutter会重新运行build方法来重新绘制界面。

上面的demo就是一个text和一个button,点击按钮,调用_changeTextContent这个私有的方法,在_changeTextContent这个方法里面我们将文本的内容进行了更改,这个操作是放在了setState方法内的,setState这个方法的作用就是通知Flutter框架,有组件的状态发生变化了,你需要重新执行build绘制界面了,这样我们重新赋值的文本内容就会展示到前台了。

下一章节:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

Flutter学习笔记(14)--StatefulWidget简单使用的更多相关文章

  1. Flutter学习笔记(13)--表单组件

    如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...

  2. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  3. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

  4. Flutter学习笔记(16)--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 今天的内容是Scaffold脚手架.AppBar组件.BottomNavigationBa ...

  5. Flutter学习笔记(29)--Flutter如何与native进行通信

    如需转载,请注明出处:Flutter学习笔记(29)--Flutter如何与native进行通信 前言:在我们开发Flutter项目的时候,难免会遇到需要调用native api或者是其他的情况,这时 ...

  6. Flutter学习笔记(22)--单个子元素的布局Widget(Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox)

    如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...

  7. Flutter学习笔记(32)--PointerEvent事件处理

    如需转载,请注明出处:Flutter学习笔记(32)--PointerEvent事件处理 在Android原生的开发中,对于事件的处理,我们都知道事件分为down.move.up事件,对于ViewGr ...

  8. Flutter学习笔记(33)--GestureDetector手势识别

    如需转载,请注明出处:Flutter学习笔记(33)--GestureDetector手势识别 这篇随笔主要记录的学习内容是GestureDetector手势识别,内容包括识别单击.双击.长按.组件拖 ...

  9. Flutter学习笔记(35)--通知Notification

    如需转载,请注明出处:Flutter学习笔记(35)--通知Notification 通知的NotificationListener和我们之前写的事件的Listener一样,都是功能性的组件,而且也都 ...

随机推荐

  1. Vue的生命周期函数

    详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...

  2. BZOJ 1061:志愿者招募(单纯型)

    题目链接 题意 中文题意. 思路 单纯型模板题. 单纯型用来解决线性规划问题. 留坑待填. 算法思路 好长 模板 论文 卿学姐视频 #include <bits/stdc++.h> usi ...

  3. scrapy基础知识之 Scrapy 和 scrapy-redis的区别:

    Scrapy 和 scrapy-redis的区别 Scrapy 是一个通用的爬虫框架,但是不支持分布式,Scrapy-redis是为了更方便地实现Scrapy分布式爬取,而提供了一些以redis为基础 ...

  4. WebLogic 任意文件上传远程代码执行_CVE-2018-2894漏洞复现

    WebLogic 任意文件上传远程代码执行_CVE-2018-2894漏洞复现 一.漏洞描述 Weblogic管理端未授权的两个页面存在任意上传getshell漏洞,可直接获取权限.Oracle 7月 ...

  5. 上传文件不落地转Base64字符串

    1. 问题描述 因需调用第三方公司的图像识别接口,入参是:证件类型.图像类型.图片base64字符串,采用http+json格式调用. 本来采用的方式是:前端对图片做base64处理,后端组装下直接调 ...

  6. Bzoj 3126[Usaco2013 Open]Photo 题解

    3126: [Usaco2013 Open]Photo Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 335  Solved: 169[Submit] ...

  7. linux应用程序设计--GCC程序编译

    GCC程序编译 linux系统下的GCC(GNU C Compiler)是GNU推出的功能强大.性能优越的多平台编译器,是GNU的代表作之一.GCC可以在多种硬件平台上编译出可执行程序,其执行效率与一 ...

  8. CAD2014学习笔记-图层图案图块

    基于 虎课网huke88.com CAD教程 对象特性 选择对象点击特性栏/或右键点击特性 颜色:color 图层 线型:线的类型,如点状线.虚线等,若不改变则默认新建的线为该类型 线型比例:不同类型 ...

  9. java学习笔记(基础篇)—数组模拟实现栈

    栈的概念 先进后出策略(LIFO) 是一种基本数据结构 栈的分类有两种:1.静态栈(数组实现) 2.动态栈(链表实现) 栈的模型图如下: 需求分析 在编写代码之前,我习惯先对要实现的程序进行需求分析, ...

  10. TigerGraph入门

    测试机器配置 1G内存,1个核,CentOS Linux release 7.4.1708 (Core)的云主机,一块50G HDD的云主机. 1. 安装 下载了目前最新的开发者版本,下载链接:htt ...