在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget:
  • StatelessWidget 是无状态组件,状态不可变的 widget
  • StatefulWidget 是有状态组件,持有的状态可能在 widget 生命周期改变。通俗的讲:如果我们想改变页面中的数据的话这个时候就需要用到 StatefulWidget

StatelessWidget中实现数据变化

在使用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 有状态组件的更多相关文章

  1. 14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表

    /** * Flutter StatefulWidget有状态组件.页面上绑定数据.改变页面数据 * 在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget/Stat ...

  2. Flutter StatefulWidget 有状态组件、页面上绑定数据、改变页面数据

    在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget 是无状态组件,状态不可变的 widget ...

  3. StatelessWidget 无状态组件 StatefulWidget 有状态组件 页面上绑定数据、改变页面数据

    一.Flutter 中自定义有状态组件 在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget ...

  4. React系列文章:无状态组件生成真实DOM结点

    在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...

  5. react-无状态组件

    import React, { Component } from "react"; //import PostItem from "./PostItem"; / ...

  6. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  7. react篇章-React State(状态)-组件都是真正隔离的

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  8. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

  9. Flutter入门之有状态组件

    StatefulComponent使用方法入门 在上一篇Flutter入门之无状态组件中我们讲到了无状态组件,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件 ...

随机推荐

  1. MSSQL sql常用判断语句

    .判断数据库是否存在 if exists (select * from sys.databases where name = '数据库名')    drop database [数据库名]  2 判断 ...

  2. virtualenv-windows下排坑

    1. 安装 pip install virtualenv pip install virtualenvwrapper-win    (win下一定要有这个 -win,不然后续 workon,mkvir ...

  3. redis数据的备份与恢复

    redis数据的备份与恢复 持久化分为两种方式:RDB和AOF 1.1 RDB模式 RDB方式的持久化是通过快照(snapshotting)完成的,当符合一定条件时Redis会自动将内存中的所有数据进 ...

  4. for in 和for of的区别

    for in 和for of的区别:https://www.jianshu.com/p/c43f418d6bf0 1 遍历数组通常用for循环 ES5的话也可以使用forEach,ES5具有遍历数组功 ...

  5. SpringCloud异常

    Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could ...

  6. hdu5858 Hard problem(求两圆相交面积)

    题目传送门 Hard problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  7. bzoj2396 神奇的矩阵(随机化)

    Time Limit: 5 Sec  Memory Limit: 512 MB 给出三个行数和列数均为N的矩阵A.B.C,判断A*B=C是否成立. 题目可能包含若干组数据.    对于每组数据,第一行 ...

  8. git 命令图解

    git 命令图解   初始化版本库 git config user.name "lsgx" git config user.email "lsgxthink@163.co ...

  9. ubuntu16.04编译linux3.9内核

    下载linux内核 解压内核 tar -xvf 安装低版本gcc,不然会报错 apt-cache search gcc-4.7 sudo apt-get install 搜索的名字 设置默认gccsu ...

  10. rabbitmq3.7集群搭建实战

    环境: 3台 centos7.4rabbitmq3.7erlang 22 1. 有几种方式安装,这里使用的yum安装(官方推荐)2. 使用rabbitmq时需要安装erlang,在各个节点上使用vim ...