bug出现场景:
添加一组固定的对象使得列表渲染添加一个栏目
思路:
由于每栏所需要的参数已知 所以
提前声明成一个空对象 往需要渲染的数组添加
每次需要增加一栏的时候就添加一个空对象
Map item = { "partitionName": ' ','partitionId':' ',};
List list = [ ];
initState 初始化的时候 和 点击添加一项时 list.add( item );
bug:
只有一项的时候正常,参数值也能正常赋值;
当第二次开始 list.add(_item) 时,注释:list 中每一项 item的value是动态获取的
我在渲染完成后的第二栏的子组件获取到了参数并往父组件传值刷新 item中的键值对时
其他 每一栏所对应的该参数奇迹般的一起刷新成同一个返回值了。
解决思路:
第一反应 我以为是子组件复用 导致传值重复刷新同一状态,
经过我一天的修改组件传值已经赋值到刷新 问题任就存在
最后发现可能是使用了同一个内存区域 就是我们所说的浅拷贝
在add的是时候只添加了item对象 而不是一个新的item 刷新修改的时候
改变的则是item 而不是list中的每一项item
解决方式其实特简单 害我测试一天的组件刷新以及传值
即深拷贝:list.add(json.decode(json.encode(item)));
浅拷贝例子:
class DevPage extends StatefulWidget {
@override
_DevPageState createState() => _DevPageState();
}
class _DevPageState extends State<DevPage> {
List list = [];
Map item = {'a': '', 'b': ''};
@override
void initState() {
super.initState();
list.add(item);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
InkWell(
child: Text('刷新其中一项'),
onTap: () {
list[0]['a'] = '浅拷贝';
setState(() {});
},
),
Column(
children: list.asMap().keys.map((i) {
return Row(
children: [
Text('a:'),
Text('${list[i]['a']}'),
Text('b:'),
Text('${list[i]['b']}'),
],
);
}).toList()),
InkWell(
child: Text('添加一个空对象'),
onTap: () {
list.add(item);
setState(() {});
},
)
],
),
);
}
}
bug:此处点击多次添加以后 在刷新其中第0项的a,其余项的a也会一起改变
改变之后在点击添加 添加的也会和之前的一模一样。
解决:在添加的时候使用list.add(json.decode(json.encode(item)))即可;