欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flutter 列表踩坑

程序员文章站 2022-07-02 22:46:28
...

expansion_tile_card这个组件,以为是组件的问题,后来发现不是,是flutter的机制问题,还跟作者报了bug,原文如下:

before I delete a item as ExpansionTileCard in my list, the expansion title card is expanded,

then next item in the deleted item postion with expanded .
like this:
1 a item opend --> delete
2 b item closed
3 c item closed

after
1 b item opend
2 c item closed

 

问题是这样的:

一个List ,我删除了其中一个item,下个item的数据会自动放入这个item里, 这个时候没发现触发item的任何方法,导致item的状态没有改变。

Flutter 列表踩坑

这个列表

Flutter 列表踩坑

展开以后删除

Flutter 列表踩坑

删除以后下个item的数据自动填入到第一个item里,但是状态并没有改变

经过我的测试,我给每个item随机了一个英文单词, 输出的时候发现 item只替换了数据,没有改变item的状态, 没有触发什么东西,直接就改了属性,看来不是组件的问题,是flutter的机制特点导致的。

解决方法有两个,组件作者给了一个,但是我测试还是没解决,如下:

You should be able to fix this in your code by giving each tile a unique key. What's happening is Flutter is copying the state from one to the other because it thinks the two widgets are the same.

Quick example:

ListView.builder(itemBuilder: (context, index){
  return ExpansionTileCard(
    key: PageStorageKey('my-tile-$index'),
    title: Text('This is tile #$index'),
  );
})

另外就是有一篇文章:

https://www.jianshu.com/p/b16f70dd692c

目前是用GlobalKey的方法,通过GlobalKey调用组件里的方法,判断并强制关闭组件状态

但是别人给我介绍了更好的解决方法:

https://juejin.im/post/5ca2152f6fb9a05e1a7a9a26

直接用

UniqueKey()

推荐用unique key来保持唯一的方法

相关标签: Flutter