Flutter动画中的一个容易忽视的点：没有key的盒子换颜色时会消失

前端

2024-02-08 09:59:06

问题

在Flutter开发中，如果您想在动画中交换两个盒子的颜色，并且这两个盒子没有key，那么您会惊讶地发现，只有颜色互换了，而数字没有动。

原因

在Flutter中，如果没有key，那么Flutter无法追踪组件的更新，因为Flutter需要依靠key来唯一地标识组件。因此，当您在动画中交换两个盒子的颜色时，Flutter会将它们视为两个不同的组件，并且不会执行动画。

解决方案

为了解决这个问题，您需要给这两个盒子添加key。key可以是任何唯一的值，例如数字或字符串。如果您给这两个盒子添加了key，那么Flutter就可以追踪它们的更新，并且会执行动画。

代码示例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              AnimatedContainer(
                key: UniqueKey(),
                duration: Duration(seconds: 1),
                curve: Curves.easeIn,
                color: Colors.green,
                width: 100,
                height: 100,
                child: Center(
                  child: Text(
                    '1',
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              AnimatedContainer(
                key: UniqueKey(),
                duration: Duration(seconds: 1),
                curve: Curves.easeIn,
                color: Colors.orange,
                width: 100,
                height: 100,
                child: Center(
                  child: Text(
                    '2',
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}