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 createState

    return 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 build

    return 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: ,),

          actions: <Widget>[

            Icon(Icons.search,size: ,)

          ],

        ),

        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绘制界面了，这样我们重新赋值的文本内容就会展示到前台了。

下一章节：Flutter学习笔记（15）--MaterialApp应用组件及routes路由详解

巴特西

Flutter学习笔记（14）--StatefulWidget简单使用

如需转载，请注明出处：Flutter学习笔记（14）--StatefulWidget简单使用

最新文章

热门文章