美文网首页
Flutter widget state management

Flutter widget state management

作者: 柳源居士 | 来源:发表于2019-08-01 00:04 被阅读0次

    本文内容选自flutter中文网

    1. 状态管理
      widget的状态可以被 自身管理,父widget管理,或者混合管理。
      由谁管理取决于widget的实际情况。
      原则:
      自身的外观属性、效果的由自己管理,如动画。如ListView渲染的内容超过自身框架时,ListView能自动滑动。
      自身展示的数据,由父类管理,如复选框的状态、滑动条的位置。

    首选在父widget中管理状态。

    1. widget interactivity交互
      简单的说,可以用GestureDetector来给任何的自定义widget来添加交互性。
    Widget build(BuildContext context) {
        return new GestureDetector(
          onTap: _handleTap,
          child: new Container(
           //create   
           ...
          )
        )
        ...
    }
    

    无状态widget从它们的父widget接收参数, 它们被存储在final型的成员变量中.
    StatefulWidget和State对象在Flutter中,这两种类型的对象具有不同的生命周期: Widget是临时对象,用于构建当前状态下的应用程序,而State对象在多次调用build()之间保持不变,允许它们记住信息(状态)。

    在Flutter中,事件流是“向上”传递的,而状态流是“向下”传递的(译者语:这类似于React/Vue中父子组件通信的方式:子widget到父widget是通过事件通信,而父到子是通过状态),重定向这一流程的共同父元素是State.

    购物车例子的创建流程思维:

    1. 定义产品product类
    2. 创建产品item的view类,它是一个无状态的widget,类包含三个属性:
      1. 产品。 2. 是否包含在购物车的bool型。 3. 一个回调函数的声明:需先声明回调类型,接受一个product和是否存在购物车的bool型。页面则被描述为一个圆形的avatar,内容为product名称的首字母。根据是否存在购物车,来更新自身字体颜色及显示。
    3. 创建产品展示列表类shoppingList,有产品的列表属性List<product> products,并定义了回调函数的具体执行,它接受一个product和是否被包含在购物车的bool型。页面是一个有状态的widget,包含一个set<product> _shoppingCart ,来判断是否加入购物车,视图创建一个Scaffold,body是一个ListView,通过widget.products.map((Product product)=>{获取product,并产成productItem视图}).toList()
    4. main方法创建一个materialApp,并调用shoppingList构造方法,传入一组product。

    相关文章

      网友评论

          本文标题:Flutter widget state management

          本文链接:https://www.haomeiwen.com/subject/jesqrctx.html