Flutter中几乎所有的 widget 都有一个 key, 我们来随便点开几个看一看
Text
Center,
它们都可以传入一个key, 只不过平常项目开发中很少用到罢了, 也不会过多的去注意它;
接下来我们看看下面的代码, 看看key 到底有什么作用
从上图可以明显地看出橙色的盒子是在绿色盒子上方显示的, 如果我把这两个 box 位置互换会发生什么呢?
结果当然都在大家的意料之中, 两个盒子的位置互换了
现在我们再给这段代码加点料, 给它加个按钮, 记录一下我们点击了它多少次, 下图是改造后的样子:
如果这个时候我把这两个 box 位置互换会发生什么呢?
emmmm... 总感觉哪里怪怪的, 为什么只有颜色互换了,数字没动, 不应该是整个盒子位置互换吗?
不着急, 慢慢来, 我们再来添加一个绿盒子,将数字加到三,放到橙色盒子下面
看起来很普通嘛, 那么问题来了!
这会儿我把数字1的盒子注释掉, 视图会怎么显示呢?
emmmm... 理想状态下,应该是 绿色的数字为1的盒子__消失, 留下橙色的2和绿色的3 嗯! 没毛病!
真实情况我们看下图:
Flutter: 😄😄😄
我再把注释掉的盒子放出来会怎么样呢? 🤭
那必须在数字为1的盒子上面出现一个数字为0 的盒子呀! 这有难度吗???
还得看下图:
Flutter: 又是愉快的打脸时刻 😄
为什么会这样子呢? 因为对于 Flutter 来说, 它已经分不清那三个盒子了,
我们看下图, 我们把橙色盒子也改为绿色了:
在代码层面来看, 是完全相同的三个Box, 并没有任何区别;
然后我们再来更换盒子的顺序,看它会不会什么改变:
我还是曾经那个顺序~, 没有一丝丝改变~
现在好像明白了一些什么, 除去视图, 我们自己看那三个代码中的 Box 根本没有任何区别.
用颜色作为唯一标识是很不靠谱的, 因为很有可能是一样颜色, 所以我们需要一个类似于uuid唯一标识, 这会儿 key 就该登场了
我们给每一个Box 都传入了 ValueKey, 这样子就能完美的按照我们的意思来了😄
如果觉得不错的话, 点个关注? 点个再看? 再不济, 点个赞也行呀!
