本文内容选自flutter中文网
- 状态管理
widget的状态可以被 自身管理,父widget管理,或者混合管理。
由谁管理取决于widget的实际情况。
原则:
自身的外观属性、效果的由自己管理,如动画。如ListView渲染的内容超过自身框架时,ListView能自动滑动。
自身展示的数据,由父类管理,如复选框的状态、滑动条的位置。
首选在父widget中管理状态。
- 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.
购物车例子的创建流程思维:
- 定义产品product类
- 创建产品item的view类,它是一个无状态的widget,类包含三个属性:
- 产品。 2. 是否包含在购物车的bool型。 3. 一个回调函数的声明:需先声明回调类型,接受一个product和是否存在购物车的bool型。页面则被描述为一个圆形的avatar,内容为product名称的首字母。根据是否存在购物车,来更新自身字体颜色及显示。
- 创建产品展示列表类shoppingList,有产品的列表属性List<product> products,并定义了回调函数的具体执行,它接受一个product和是否被包含在购物车的bool型。页面是一个有状态的widget,包含一个set<product> _shoppingCart ,来判断是否加入购物车,视图创建一个Scaffold,body是一个ListView,通过widget.products.map((Product product)=>{获取product,并产成productItem视图}).
toList()
- main方法创建一个materialApp,并调用shoppingList构造方法,传入一组product。
网友评论