StatefulWidget 有状态组件
- StatelessWidget 是无状态组件,状态不可变的 widget
- StatefulWidget 是有状态组件,持有的状态可能在 widget 生命周期改变。通俗的讲:如果我们想改变页面中的数据的话这个时候就需要用到 StatefulWidget
StatelessWidget中实现数据变化
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title: Text('Flutter Demo')
),
body: HomePage(),
)
);
}
} class HomePage extends StatelessWidget {
int countNum=1;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
SizedBox(height: 200),
Text("${this.countNum}"),
SizedBox(height: 20),
RaisedButton(
child: Text("按钮"),
onPressed: (){
this.countNum++;
print(this.countNum);
},
)
],
);
}
}
此时,当点击按钮,改变countNum的值时,发现控制台里面的打印中,数值是变化的,但是页面中却没有变化效果,此时就需要使用StatefulWidget了。
StatefulWidget中改变数据
StatefulWidget是一个抽象类,在这个类中,有一个抽象方法createState(),然后在这个抽象方法中调用自定义的_HomePageState()类,_HomePageState()类需要继承State类,最后在这个类中实现build()方法。
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
_HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> {
int countNum=0;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
SizedBox(height: 200),
Chip(
label:Text('${this.countNum}') ,
),
SizedBox(height: 20),
RaisedButton(
child: Text('按钮'),
onPressed: (){
setState(() { //只有有状态组件里面才有
this.countNum++;
});
},
)
],
);
}
}
添加数据
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
_HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> { List list=new List();
@override
Widget build(BuildContext context) {
return ListView( children: <Widget>[
Column(
children: this.list.map((value){
return ListTile(
title: Text(value),
);
}).toList()
),
SizedBox(height: 20),
RaisedButton(
child: Text("按钮"),
onPressed: (){
setState(() {
this.list.add('新增数据1');
this.list.add('新增数据2');
});
},
)
],
);
}
}
StatefulWidget 有状态组件的更多相关文章
- 14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表
/** * Flutter StatefulWidget有状态组件.页面上绑定数据.改变页面数据 * 在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget/Stat ...
- Flutter StatefulWidget 有状态组件、页面上绑定数据、改变页面数据
在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget 是无状态组件,状态不可变的 widget ...
- StatelessWidget 无状态组件 StatefulWidget 有状态组件 页面上绑定数据、改变页面数据
一.Flutter 中自定义有状态组件 在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget ...
- React系列文章:无状态组件生成真实DOM结点
在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...
- react-无状态组件
import React, { Component } from "react"; //import PostItem from "./PostItem"; / ...
- React 中的 Component、PureComponent、无状态组件 之间的比较
React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...
- react篇章-React State(状态)-组件都是真正隔离的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
- Flutter入门之有状态组件
StatefulComponent使用方法入门 在上一篇Flutter入门之无状态组件中我们讲到了无状态组件,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件 ...
随机推荐
- 关闭myeclipse中烦人的鼠标划过,自动提示功能
eclipse越来越智能,身为码农的我却越来越伤心.虽然你很智能,但请你提供一些有用的信息给我,不要乱七八槽的,不问青红皂白就塞一大堆提示给我,对不起,哥不需要这些!!! 都知道,使用myeclips ...
- How to resolve error “Failed to resolve: org.jetbrains.kotlin:kotlin-stdlib-jre7…” when building in Android Studio Ask Question
//implementation"org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version" implementation & ...
- c#继承与构造函数的调用
1.实例化父类时,可以通过new子类来实例化父类,执行构造函数的顺序为:先执行父类的构造函数,再执行子类的构造函数. 2.实例化子类时,只可以new子类,执行顺序同上. 3.父类实例化后,只能执行父类 ...
- Android深度探索-卷1第七章心得体会
创建LED驱动的设备文件 第一步:使用cdev_init函数初始化cdev 第二步:指定设备号.直接在代码指定或动态分配 第三步:使用cdev_add函数将字符设备添加到内核中的字符设备数组中 第四步 ...
- Java 语言的类、属性、方法各有哪些修饰符?简述各修饰符的区别
1. 类的修饰符分为:可访问控制符和非访问控制符两种. 可访问控制符是:公共类修饰符 public 非访问控制符有:抽象类修饰符 abstract :最终类修饰符 final 1.公共类修饰符 pub ...
- .apk的MIME类型
1.扩展名: .apk MIME类型: application/vnd.android 2.Internet 服务管理器添加.apk:打开IIS --->找到MIME类型,双击之 -- ...
- 排序算法二:归并排序(Merge sort)
归并排序(Merge sort)用到了分治思想,即分-治-合三步,算法平均时间复杂度是O(nlgn). (一)算法实现 private void merge_sort(int[] array, int ...
- Learning OSG programing---osgAnimation(2)
osg::Node* createBase(const osg::Vec3& center,float radius) { ; ; *radius; *radius; osg::Vec3 v0 ...
- 17、NumPy——副本和视图
副本是一个数据的完整的拷贝,如果我们对副本进行修改,它不会影响到原始数据,物理内存不在同一位置. 视图是数据的一个别称或引用,通过该别称或引用亦便可访问.操作原有数据,但原有数据不会产生拷贝.如果我们 ...
- js事件循环了解一下
https://segmentfault.com/a/1190000019900532