在 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. STM32 在串口通信时运用MODBUS协议

    最近一个项目用到了MODBUS协议,就学习了一下,这里做一下记录以免后续忘记. 要用到MODBUS肯定要先知道是MOBUS协议,这里呢我们就又要先理解协议的含义了. 所谓的协议是什么?就是互相之间的约 ...

  2. Memecached 服务器安装(一)

    Memecached 服务器安装(一) 前提:首先您的php环境已经安装完成,如若没有则参考 http://www.cnblogs.com/xulele/p/5264781.html 安装环境链接:h ...

  3. Unity shader with lightmap

    小记一下用法与问题,时更 surface shader就不用操心了,自带lightmap计算 主要是vertex fragment shader部分 Unity5 bake light map有三种情 ...

  4. 软件体系结构-分层、代理、MVC、管道与过滤器

    什么是软件架构? 程序或计算系统的软件体系结构是系统的一个或多个结构,包括软件元素.这些元素的外部可见属性以及它们之间的关系. ——Software Engineering Institute(SEI ...

  5. 《STL源码剖析》——第七、八章:仿函数与接配器

    第七章:仿函数  7.1.仿函数(函数对象)概观 STL仿函数的分类,若以操作数(operand)的个数划分,可分为一元和二元仿函数,若以功能划分,可分为算术运算(Arithmetic).关系运算(R ...

  6. 认识requests库,以及安装方法

    1.学习requests库有什么意义 1)对我来说,我是测试人员,我用它来解决HTTP接口自动化测试 2)写爬虫需要用到requests 3)如果是开发人员,需要些接口,了解requests有助于掌握 ...

  7. Pikachu漏洞练习平台实验——文件包含(File Inclusion)(六)

    1.概述 1.1简介 在 Web 后台开发中,程序员往往为了提高效率以及让代码看起来更加简洁,会使用 “包含” 函数功能.比如把一系列功能函数都写进 function.php 中,之后当某个文件需要调 ...

  8. python selenium无法清除文本框内容问题

    正常是我们在清除文本框内容的时候,都会使用 clear() 函数进行清除,但是有时候会出现,清除完成后再点击查询时,文本框的内容会再次自动填充,这个时候我们可以选择以下方式: #清空查询条件drive ...

  9. spring security简单教程以及实现完全前后端分离

    spring security是spring家族的一个安全框架,入门简单.对比shiro,它自带登录页面,自动完成登录操作.权限过滤时支持http方法过滤. 在新手入门使用时,只需要简单的配置,即可实 ...

  10. KNN算法案例--手写数字识别

    import numpy as np import matplotlib .pyplot as plt import pandas as pd from sklearn.neighbors impor ...