Question

我正在研究颤动中的关键。解释一下，当我想在statefulWidget中交换小部件时，我需要添加键值。因为在检查element structure的类型，状态是否相同时，它们不会响应。这就是我的理解。

void main() => runApp(new MaterialApp(home: PositionedTiles()));

class PositionedTiles extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => PositionedTilesState();
}

class PositionedTilesState extends State<PositionedTiles> {

List<Widget> tiles = [
  StatefulColorfulTile(key: UniqueKey()), // Keys added here
  StatefulColorfulTile(key: UniqueKey()),
];

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Row(children: tiles),
     floatingActionButton: FloatingActionButton(
         child: Icon(Icons.sentiment_very_satisfied), onPressed: swapTiles),
   );
 }

 swapTiles() {
   setState(() {
     tiles.insert(1, tiles.removeAt(0));
   });
 }
}



class StatefulColorfulTile extends StatefulWidget {
  StatefulColorfulTile({Key key}) : super(key: key);  // NEW CONSTRUCTOR

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

class ColorfulTileState extends State<ColorfulTile> {
  Color myColor;

  @override
  void initState() {
    super.initState();
    myColor = UniqueColorGenerator.getColor();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        color: myColor,
        child: Padding(
          padding: EdgeInsets.all(70.0),
        ));
  }
}

但是我看到了这段代码。

Widget build(BuildContext context) {
  return Column(
    children: [
      value
          ? const SizedBox()
          : const Placeholder(),
      GestureDetector(
        onTap: () {
          setState(() {
            value = !value;
          });
        },
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
      ),
      !value
          ? const SizedBox()
          : const Placeholder(),
    ],
  );
}

此代码也使用statefulWidget。在此代码中，当用户点击Box时，它已更改，但我认为没有键值，并且在元素结构中存在不同的类型（一个是SizedBox，另一个是placeHolder），所以我认为没有更改。为什么要改变？我误会了什么？

具有关键概念的statfulWidget

0 个答案: