占位 widget 没有消失

[feimenggo]

项目有两种列表样式，当切换列表后，有时候FrameSeparateWidget的占位 widget 没有消失，必须滑动一下才会消失。

device-2021-07-01-095955.mp4

[Nayuta403]

没太看明白，描述一下关键操作和关键代码

[feimenggo]

我把ComplexListOptExample1的ListView部分做了以下改动

        child: FutureBuilder<int>(
          future: Future.delayed(Duration(seconds: 1), () => 100), // 模拟加载数据耗时1秒
          initialData: 0,
          builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
            return ListView.builder(
              cacheExtent: 500,
              controller: scrollController,
              itemCount: snapshot.data,
              itemBuilder: (c, i) => FrameSeparateWidget(
                index: i,
                placeHolder: Container(
                  color: i % 2 == 0 ? Colors.yellow : Colors.green, // 修改占位的背景色
                  height: 60,
                ),
                child: CellWidget(
                  color: i % 2 == 0 ? Colors.red : Colors.blue,
                  index: i,
                ),
              ),
            );
          },
        ),

就遇到了占位widget没有消失的问题
https://user-images.githubusercontent.com/12608693/124060334-6a979780-da5f-11eb-969e-b6ae6fb6abb7.mp4

[feimenggo]

给 FrameSeparateWidget 嵌套透明度/位移等动画就正常了

        child: FutureBuilder<int>(
          future: Future.delayed(Duration(seconds: 1), () => 100), // 模拟加载数据耗时1秒
          initialData: 0,
          builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
            return ListView.builder(
              cacheExtent: 500,
              controller: scrollController,
              itemCount: snapshot.data,
              itemBuilder: (c, i) => OpacityTansWidget( // 嵌套透明度动画
                child: FrameSeparateWidget(
                  index: i,
                  placeHolder: Container(
                    color: i % 2 == 0 ? Colors.yellow : Colors.green, // 修改占位的背景色
                    height: 60,
                  ),
                  child: CellWidget(
                    color: i % 2 == 0 ? Colors.red : Colors.blue,
                    index: i,
                  ),
                ),
              ),
            );
          },
        ),

[Nayuta403]

嗯嗯 感谢反馈，这个问题能复现，我在晚上调试一下

[Nayuta403]

             itemBuilder: (c, i) => FrameSeparateWidget(
                index: i,
                placeHolder: Container(
                  color: Colors.white,
                  height: 60,
                ),
                child: OpacityTansWidget(
                  child: CellWidget(
                    color: i % 2 == 0 ? Colors.red : Colors.blue,
                    index: i,
                  ),
                ),
              ),

动画按照那种加法有效果么，应该是要包裹实际的 item

[feimenggo]

             itemBuilder: (c, i) => FrameSeparateWidget(
                index: i,
                placeHolder: Container(
                  color: Colors.white,
                  height: 60,
                ),
                child: OpacityTansWidget(
                  child: CellWidget(
                    color: i % 2 == 0 ? Colors.red : Colors.blue,
                    index: i,
                  ),
                ),
              ),

动画按照那种加法有效果么，应该是要包裹实际的 item

如果包裹实际的 item，那就还是一样的占位 widget 没有消失。另外，修改某个item后，界面没有变化，必须滑动一下才会刷新，应该都是同一个原因。

[Nayuta403]

恩 我打断点调试之后，发现任务队列的调度失败了。看起来这个 future 会影响到系统 endOfFrame 的回调，导致这个 Future 没法返回，所以没有正确的替换。

[Nayuta403]

使 1.0.2 或者 2.0.2 版本试试

[Nayuta403]

方便发一个使用后的录屏么

[feimenggo]

使 1.0.2 或者 2.0.2 版本试试

好的，待会我试试。

[feimenggo]

换成 2.0.2 版本就正常了，o(￣▽￣)ｄ赞！

[Nayuta403]

方便搞个录屏，搞个录屏么，兄die，直接传到这或者发我邮箱也成。我在做个合集，可以留一些你的推荐信息。

[feimenggo]

方便搞个录屏，搞个录屏么，兄die，直接传到这或者发我邮箱也成。我在做个合集，可以留一些你的推荐信息。

好的！
https://user-images.githubusercontent.com/12608693/125192896-8891a300-e27c-11eb-86f1-9730d0d01eaf.mp4

[Nayuta403]

哇 多谢！有 QQ 咩，咱们细聊

[Nayuta403]

我的是 762579473

[xiemingtian]

使用fish_redux框架

使用版本
keframe: 1.0.2

实现代码
GridView.builder( cacheExtent: 500, itemBuilder: (ctx, index) { return FrameSeparateWidget( index: index, placeHolder: Container( padding: EdgeInsets.all(6), decoration: BoxDecoration( borderRadius: BorderRadius.circular(4), color: YZColors.w, ), height: 86, ), child: OpacityTansWidget( child: adapter.itemBuilder(ctx, index), ), ); }, itemCount: adapter.itemCount, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 4, crossAxisSpacing: 4, childAspectRatio: aspectRatio(), ), );

操作视频：

QtScrcpy_20210904_161800_478.mp4

日志：
因为是没有看到后台有日志输出
void transformWidget() { SchedulerBinding.instance.addPostFrameCallback((t) { FrameSeparateTaskQueue.instance.scheduleTask(() { if (mounted) setState(() { result = widget.child; }); }, Priority.animation, id: widget.index); }); }
调试的时候，看到调用到了SchedulerBinding.instance.addPostFrameCallback，但是没有没有调用FrameSeparateTaskQueue.instance.scheduleTask，说明出现了没有回调addPostFrameCallback，但是不知道为什么没有回调。在界面上随便操作一下就会显示出来。