打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Flutter学习笔记(14)--StatefulWidget简单使用

如需转载,请注明出处:Flutter学习笔记(14)--StatefulWidget简单使用

今天上班没那么忙,突然想起来我好像没StatefulWidget(有状态组件)的demo,闲来无事,写一个简单的学习学习,前面我们有说过,Flutter不同于Android。Flutter是只绘制一帧,这一帧会绘制整个widget树,也就是说一次绘制整个界面,那么想一下,如果想要页面内容发生变化,是不是要重新绘制界面呢?如果需要重新绘制的,又怎么样来触发重新绘制的机制呢?先看下demo的代码吧,很简单的!

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget{  @override  State<StatefulWidget> createState() {// TODO: implement createStatereturn new MyAppState();  }}class MyAppState extends State<MyApp> {  var _textContent = 'welcome to flutter word';  void _changeTextContent(){    setState(() {      _textContent = 'what is up man???';    });  }  @override  Widget build(BuildContext context) {// TODO: implement buildreturn new MaterialApp(      theme: new ThemeData(        primaryColor: Colors.white,      ),      debugShowCheckedModeBanner: false,      title: 'demo',      home: new Scaffold(        appBar: new AppBar(          title: new Text('Demo'),          leading: Icon(Icons.menu,size: 30,),          actions: <Widget>[            Icon(Icons.search,size: 30,)          ],        ),        body: new Center(          child: new Text(_textContent),        ),        floatingActionButton: new FloatingActionButton(onPressed: _changeTextContent,child: new Icon(Icons.adjust),),      ),    );  }}

StatefulWidget是有状态的组件,意思不是说StatefulWidget类本身是可变的,实际上StatefulWidget类本身也是不变的,而StatefulWidget持有的state状态是在widget整个生命周期内一直存在的,也是因为有了这个state状态,我们就可以通知Flutter框架某一个状态发生了变化,Flutter会重新运行build方法来重新绘制界面。

上面的demo就是一个text和一个button,点击按钮,调用_changeTextContent这个私有的方法,在_changeTextContent这个方法里面我们将文本的内容进行了更改,这个操作是放在了setState方法内的,setState这个方法的作用就是通知Flutter框架,有组件的状态发生变化了,你需要重新执行build绘制界面了,这样我们重新赋值的文本内容就会展示到前台了。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
Flutter ListView 局部刷新数据、ListView点赞收藏
Flutter提示之Navigator operation requested with a context that does not include a Navigator.
Flutter完整开发实战详解(十五、全面理解State与Provider)
Flutter
Flutter-BottomNavigationBar的使用说明
初识flutter
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服