Flutter圈子FlutterFlutter

flutter -- 状态

2019-07-25  本文已影响44人  反者道之动001

flutter 如何修改状态,如何修改UI层?

有两个状态 statelessstateful

默认create代码如下,它用的是无状态stateless

如果要实现状态修改,那么就需要改成stateful.

如何实现, 点击后数据更变。


UI带状态的分为,父widget 和子widget自管理,混合管理。

正常全局管理就ok了。看下顶级管理。

先createState下

class ParentWidget extends StatefulWidget {
ParentWidget({Key key}) : super(key: key);
  @override
  _ParentWidgetState createState() => new _ParentWidgetState();
}

修改下MystatelessWidget

class _ParentWidgetState extends State<ParentWidget> 

如图


然后我们状态就是有状态的了,可以修改值,从而更新UI。

例子:播放的状态改变

UI

icon: isPlay ? new Icon(Icons.pause) : new Icon(Icons.play_arrow)

JS

    hanldePlayButton(){
        setState(() {
            isPlay = !isPlay;          
        });
    }

重点就是 setData哈。

这时候有可能没改变,检查下isPlay定义的位置

在State下面, 如下

ok

其他的也类似需要注意下,避免多次实例化,以免造成内存爆满。如果是声音之类的还好,因为多次播放,可以知道问题并且发现。


关于自管理也类似,参考flutter中文的widget管理自己的状态

--END--

上一篇下一篇

猜你喜欢

热点阅读