14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表
/**
* 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有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表的更多相关文章
- StatefulWidget 有状态组件
在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget: StatelessWidget 是无状态组件,状态不可变的 widget ...
- Flutter StatefulWidget 有状态组件、页面上绑定数据、改变页面数据
在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget 是无状态组件,状态不可变的 widget ...
- StatelessWidget 无状态组件 StatefulWidget 有状态组件 页面上绑定数据、改变页面数据
一.Flutter 中自定义有状态组件 在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget ...
- 点击页面上的元素,页面删除removeChild()
简单描述:最近做了一个图片上传,上传完成回显图片的时候,需要用到点击图片,从页面删除的效果,然后就找到了removeChild()方法,说实话,我刚看到的时候,就觉得这个问题已经解决了,但是却发现这个 ...
- h5 实现页面上拉加载更多数据
您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...
- 奇怪的现象,打印出来可以见到数据,在右边看不到数据,放到list里在页面上也显示不了数据
- 如何使用 js 检测页面上全局变量
如何使用 js 检测页面上全局变量 js 检测页面全局变量脚本 <!DOCTYPE html> <html lang="zh-Hans"> <head ...
- HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据
在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据. 众所周知Grid网格控件是用户界面的一个重 ...
- Chrome插件在页面上直接绑定JavaScript事件提示Refused to execute inline event handler because it violates the following Co
Chrome插件问了安全是不提倡在页面上直接写JavaScript的,如果出现了这个提示,其实也没有什么,同样可以运行. 从Chrome Extenstion V2开始,不允许执行任何inline j ...
随机推荐
- Linux命令——cp、rm、mv、touch、file、dir
cp copy 拷贝文件 拷贝过程不指定目标文件名 则目标文件名和源文件名一样 [root@WebServer ~]# cp /91xueit/teacher.txt 51cto/ 拷贝过程指定目标文 ...
- 读HTTP权威指南的体会
国庆期间,我读了HTTP权威指南一书,现在我把总节为大家讲一下: Web 浏览器.服务器和相关的Web 应用程序都是通过HTTP 相互通信的.HTTP 是 现代全球因特网中使用的公共语言. 是对HTT ...
- java8大基本类型
文章转载自:Java的8种基本数据类型 请阅读原文. 关于Java的8种基本数据类型,其名称.位数.默认值.取值范围及示例如下表所示: 序号 数据类型 位数 默认值 取值范围 举例说明 1 byte( ...
- How to resolve the 403 error when send POST request from Postman
Root cause: the site refused the connection from the http request origin, by default it is setted as ...
- 线程的 run()和 start()有什么区别?(未完成)
线程的 run()和 start()有什么区别?(未完成)
- nginx添加模块记录
查看现有nginx的编译参数: [root@iZbp1d0dkjhfmxnxp7wuhmZ nginx-1.12.2]# nginx -Vnginx version: nginx/1.12.2buil ...
- python画图matplolib
http://python.jobbole.com/85106/ 1.画二维图 2.画三维图 我的电脑只能在jupyter notebook上面运行才能看的到,常规import库 %matplotli ...
- [WebMethod]参数介绍
一.WebService的调试 net 2.0新建webservice为了安全考虑,默认关闭了Post和Get方法 .让其打开,可在Web.config文件的<system.web>下增加 ...
- 内网端口映射+dnslog
以前的DNSLOG部署在公网上也即自己的服务器上,产品依赖个人的环境不是很好.于是做了修改. 框架 细节 1)A域名的域名服务器指向B域名 ns0.B.com ns1.B.com 2)B域名的两个ns ...
- python3.6 创建字典三法
这里献丑给出 python 3.6 创建字典变量的三法 其一:阳春白雪法:直接声明 mydic = {"name":"徐晓冬","age" ...