flutter - 改变一项参数时其它组件一起刷新 (深拷贝与浅拷贝)

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(() {});
            },
          )
       ],
     ),
   );
 }
}
clipboard.png

bug:此处点击多次添加以后 在刷新其中第0项的a,其余项的a也会一起改变

改变之后在点击添加 添加的也会和之前的一模一样。

解决:在添加的时候使用list.add(json.decode(json.encode(item)))即可;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容