如需转载,请注明出处: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. fis3前端工程构建配置入门教程

    一.前言 fis3是百度推出的一款前端工程构建工具,类似的还有webpack,gulp等工具:无论大家有没有使用过,从事前端行业应该都略知一二了,所以对于此类工具用干嘛的我这里就不做重复了. 其实对于 ...

  2. 并发编程-concurrent指南-线程池ExecutorService的使用

    有几种不同的方式来将任务委托给 ExecutorService 去执行: execute(Runnable) submit(Runnable) submit(Callable) invokeAny(… ...

  3. python3 连接数据库注意点

    类库:pymysql ''' Created on 2019年 @author: Root ''' import pymysql from name import getName # 数据库连接信息 ...

  4. 源代码扫描工具Fortify SCA与FindBugs的简单对比

    前段时间因为工作原因需要对java源代码进行扫描,现结合使用经验对静态代码扫描工具Fortify SCA与FindBugs进行一个简单的对比. 一.Fortify SCA Fortify SCA是由全 ...

  5. ~~函数基础(二):返回值&作用域~~

    进击のpython 函数的返回值和作用域 上文我们讲到了函数的基础--参数的相关问题 举的例子也都是带有print的函数定义 但是有个问题就出现了:我不想打印这个函数处理后的参数 我想拿到这个参数然后 ...

  6. 【Netty】Netty简介及服务器客户端简单开发流程

    什么是Netty Netty是一个基于Java NIO的编写客服端服务器的框架,是一个异步事件框架. 官网https://netty.io/ 为什么选择Netty 由于JAVA NIO编写服务器的过程 ...

  7. linux weblogic12.1.3.0卸载过程

    主要是一开始以为跟之前版本一样有uninstall.sh,但却找不到. 最后google 才发现改了个名字,deinstall.sh 可能后面的版本都是这个脚本了吧. 先进入脚本目录,命令:cd /h ...

  8. Vue杂谈

    <div id="app"> <input type="text" ref="input1"/> <butto ...

  9. 学习笔记-jvm运行时数据区

    按照线程私有和共享区域来划分 线程私有 程序计数器 指向当前线程正在执行的字节码行号地址,如果是本地方法,值为undefined 虚拟机中唯一不会oom的区域 为什么会有程序计数器 - java天生多 ...

  10. Android问题解决

    1.clean之后R文件消失 clean之后R文件消失是因为布局的XML文件存在错误,无法编译你的资源文件,所以无法自动生成R文件,在Problem.LogCat等界面查看错误的原因,把错误改正即可: ...