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

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('自定义组件'),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Stack结合align实现布局:
return HomePage();
}
} //自定义有状态组件:
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key); _HomePageState createState() => _HomePageState();
} class _HomePageState extends State<HomePage> {
int countNum=;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
SizedBox(height: ),
Chip(label: Text('${this.countNum}')),
SizedBox(height: ),
RaisedButton(
child: Text('按钮'),
onPressed: (){
setState(() { //只有有状态的组件里面才有
this.countNum++;
});
},
)
],
);
}
}

demo2

main.dart

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('自定义组件'),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Stack结合align实现布局:
return HomePage();
}
} //自定义有状态组件:
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()
),
RaisedButton(
child: Text('按钮'),
onPressed: (){
setState(() {
this.list.add('新增数据1');
this.list.add('新增数据2');
});
},
)
],
);
}
}

14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表的更多相关文章

  1. StatefulWidget 有状态组件

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

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

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

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

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

  4. 点击页面上的元素,页面删除removeChild()

    简单描述:最近做了一个图片上传,上传完成回显图片的时候,需要用到点击图片,从页面删除的效果,然后就找到了removeChild()方法,说实话,我刚看到的时候,就觉得这个问题已经解决了,但是却发现这个 ...

  5. h5 实现页面上拉加载更多数据

    您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...

  6. 奇怪的现象,打印出来可以见到数据,在右边看不到数据,放到list里在页面上也显示不了数据

  7. 如何使用 js 检测页面上全局变量

    如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...

  8. HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据

    在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据. 众所周知Grid网格控件是用户界面的一个重 ...

  9. Chrome插件在页面上直接绑定JavaScript事件提示Refused to execute inline event handler because it violates the following Co

    Chrome插件问了安全是不提倡在页面上直接写JavaScript的,如果出现了这个提示,其实也没有什么,同样可以运行. 从Chrome Extenstion V2开始,不允许执行任何inline j ...

随机推荐

  1. 《深入Linux内核架构》笔记 --- 第一章 简介和概述

    Linux将虚拟地址空间划分为两个部分,分别称为内核空间和用户空间 各个系统进程的用户空间是完全彼此分离的,而虚拟地址空间顶部的内核空间总是同样的,无论当前执行的是哪个进程. 尽管Intel处理器区分 ...

  2. [杭电oj][1005]Number Sequence

    sky同学在努力地刷题..,在这题卡住了,于是一起研究了一下... 这题本身挺简单的,(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) m ...

  3. K8S漏洞报告 | 近期bug fix解读&1.13主要bug fix汇总

    K8s近期漏洞详解 Kubernetes仪表盘漏洞(CVE-2018-18264) 因为这一漏洞,用户可以“跳过”登录过程获得仪表盘所使用的自定义TLS证书.如果您已将Kubernetes仪表盘配置为 ...

  4. C# 开发的windows服务 不能调试——讨论整理

    CSDN的标题:C# 开发的windows服务 不能调试 System.Diagnostics.Debugger.Launch();在想加断点的地方加入这行,是进入断点的,可以进行调试,我的是xp系统 ...

  5. 《构建之法》——Alpha2项目的测试

    这个作业属于哪个课程 课程的链接 这个作业要求在哪里 作业要求的链接 团队名称 Runningman 这个作业的目标 测试其他组的项目,互相借鉴 作业正文 作业正文 测试人姓名 陈嘉莹 测试人学号 2 ...

  6. 4.使用webpack-dev-server工具实现自动打包编译的功能

    使用webpack-dev-server这个工具,来实现自动打包编译的功能 1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖 或者运行 cnpm i ...

  7. css引用优先级

    /***************************************css注意事项*******************************************/ 浏览器优先级:设 ...

  8. Task.Run 和 Task.Factory.StartNew 区别

    Task.Run 是在 dotnet framework 4.5 之后才可以使用, Task.Factory.StartNew 可以使用比 Task.Run 更多的参数,可以做到更多的定制. 可以认为 ...

  9. c++ string类基本使用

    初始化用法 #include <iostream> #include "string" using namespace std; void main() { strin ...

  10. python执行ad_hoc

    import shutil from collections import namedtuple from ansible.parsing.dataloader import DataLoader f ...