Flutter 踩坑记（一）

Flutter

初入Flutter，写Flutter仿京东商城项目，踩坑踏平记

页面展示

实现代码逻辑

• CartItem 子组件

class CartItem extends StatefulWidget  {
  Map itemData;
  CartItem(this.itemData, {Key key}): super(key: key);
  @override
  _CartItemState createState() => _CartItemState();
}

class _CartItemState extends State<CartItem> {
  Map _itemData;
  var cartProvider;

  @override
  void initState() {
    super.initState();
    this._itemData = widget.itemData;
  }

  @override
  Widget build(BuildContext context) {
    this.cartProvider = Provider.of<Cart>(context);
    return Container(
      ……
    );
  }
}

• Cart父组件循环调用子组件，并传值

class CartPage extends StatefulWidget {
  @override
  _CartPageState createState() => _CartPageState();
}

class _CartPageState extends State<CartPage>{

  var cartProvider;
  bool isEdit = false;

  @override
  Widget build(BuildContext context) {
    ScreenAdapter.init(context);
    this.cartProvider = Provider.of<Cart>(context);
    return Scaffold(
	     body: Stack(
	        children: <Widget>[
	          ListView(
	            children: <Widget>[
	              Column(
	                children: cartProvider.cartList.map<Widget>((e){
	                      return CartItem(e);
	                }).toList(),
	              ),
	              SizedBox(height: ScreenAdapter.height(100),)
	            ],
	          ),
	          ]
	    );
    }
}

操作与现象

操作一：删除中间俩个购物项
现象：删除最后俩项购物项
操作二：删除最后俩个购物项
现象：删除最后俩项购物项

搜索问题所在点

1. 在Cart组件的循环中，添加输出数据

 cartProvider.cartList.map<Widget>((e){
 		// 输出数据
 		print(e);
        return CartItem(e);
  }).toList(),

结论： 数据输出正确

2. 在 CartItem 组件的循环中，添加输出数据

  void initState() {
    super.initState();
    // 赋值前输出数据
    print(widget.itemData);
    this._itemData = widget.itemData;
  }

结论： 数据第一次的输出正确，第二次删除数据的时候，不输出（删除逻辑正确的情况下）

分析与结论

分析

1. Cart父组件循环CartItem组件，删除子组件组件
2. 父组件执行build，重新传值给子组件，子组件只在初次构建组件的时候，执行 initState； 父组件再次构建子组件时，只执行build，不执行initState

结论

子组件需要多次赋值的时候，赋值操作应置于build中；只需要一次赋值的时候，赋值操作应置于initState中。

欢迎指正错误! ♡♡♡