Flutter 关于弗利特的钥匙，有些地方我不太了解

我在看了一段解释弗利特钥匙的视频后练习

此视频显示了使用特定颜色更改容器位置的示例。大约1分50秒

在视频中，statefulwidget表示，如果没有键，位置不会改变

但我自己编写了示例代码，并确认它在没有为有状态小部件提供密钥的情况下工作

我想我把示例代码写错了。下面是我写的代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: KeyPractice(),
    );
  }
}

class StatefulColorfulTile extends StatefulWidget {
  StatefulColorfulTile({@required this.color});

  final Color color;

  @override
  _StatefulColorfulTileState createState() => _StatefulColorfulTileState();
}

class _StatefulColorfulTileState extends State<StatefulColorfulTile> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: widget.color,
    );
  }
}

class KeyPractice extends StatefulWidget {
  @override
  _KeyPracticeState createState() => _KeyPracticeState();
}

class _KeyPracticeState extends State<KeyPractice> {
  List<Widget> tiles;

  @override
  void initState() {
    super.initState();
    tiles = [
      StatefulColorfulTile(
        color: Colors.blueAccent,
      ),
      StatefulColorfulTile(
        color: Colors.amber,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          children: tiles,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.autorenew,
        ),
        onPressed: () {
          setState(() {
            tiles.insert(1, tiles.removeAt(0));
          });
        },
      ),
    );
  }
}

上述代码相互切换位置

当视频中的有状态小部件没有分配密钥时，小部件如何不重新定位彼此的示例会发生什么情况

我知道密钥只在有状态小部件上工作，无状态小部件是否使用密钥

我知道密钥只适用于有状态小部件。我想知道无状态小部件是否使用密钥

---

如果我误解了，请教我。

您正在钥匙练习状态下存储颜色。他们使用的示例将其存储在子级的状态中，在您的示例中为：StatefulColorfulTile

下面是一个使用键来正确重新定位小部件的示例，就像您正在尝试的那样。我的例子和上面显示的非常相似。移除这里的键可以防止小部件反映颜色交换，但是使用键可以实现预期的行为

进口“包装：颤振/材料.省道”； 导入“dart:math”； 真空总管{ runAppMyApp； } 类MyApp扩展了无状态小部件{ //此小部件是应用程序的根。 @凌驾 小部件构建上下文上下文{ 返回材料PP 标题：“颤振演示”， 家庭：关键实践， ; } } 类StatefulColorfulTile扩展StatefulWidget{ StatefulColorfulTile{Key}:superkey:Key； @凌驾 _StatefolColorfulTilEstate createState=>\u statefolColorfulTilEstate； } 类_statefolColorTilEstate扩展状态{ 最终颜色myColor=UniqueColorGenerator.getColor； @凌驾 小部件构建上下文上下文{ 返回容器 宽度：100， 身高：100， 颜色：myColor， ; } } 类KeyPractice扩展了StatefulWidget{ @凌驾 _KeyPracticeState createState=>\u KeyPracticeState； } 类KeyPracticesState扩展状态{ 列出瓷砖； @凌驾 无效初始状态{ super.initState； 瓷砖=[ StatefolColorTileKey:UniqueKey， StatefolColorTileKey:UniqueKey， ]; } @凌驾 小部件构建上下文上下文{ 返回脚手架 正文：安全区 孩子：排 儿童：瓷砖， , , 浮动操作按钮：浮动操作按钮 子：图标 Icons.autorenew， , 按下按钮：{ 设定状态{ tiles.insert1，tiles.removeAt0； }; }, , ; } } 类唯一颜色生成器{ 静态随机=新随机； 静态颜色getColor{ 返回Color.fromARGB255，random.nextInt255，random.nextInt255，random.nextInt255； } }

---

您正在关键实践状态下存储颜色。他们使用的示例将其存储在子部件的状态中，在您的示例中为：StatefulColorfulTile。我认为这是一个问题，所以我为子部件分配了一个颜色状态，但我仍然更改了彼此的部件。你能给我看一下示例代码吗？谢谢你的回复。我实际上并没有举例，我只是注意到了你的问题。你想让我创建一个吗？我把它作为一个答案发布。很抱歉回复太晚。我很高兴你回答了。我会根据你告诉我的再研究一遍。我正在考虑写一篇关于这个的博客，我可以透露代码的来源并引用它吗？@Jay flow你可以不经我的许可，根据我的建议，只要你给予适当的信任。但是，我必须提到，我从其他地方获取了颜色生成器，它最终看起来与我链接的媒体文章中的代码非常相似。