Flutter中如何移动运行时动态生成的Positioned Widget

该现象本质是Flutter的Widget不可变特性导致的：

• 你调用addHeart方法时，就已经基于调用那一刻的x、y瞬时值创建了一个固定的Positioned实例，存到了myList里。Widget本身是不可变的配置类，一旦创建完成，它的top、left属性就不会再变化，后续你修改全局x、y变量，也不会自动同步到已经创建好的Positioned实例上。
• 直接写在build方法里的Positioned能正常更新，是因为每次setState触发build重执行时，都会基于最新的x、y重新创建一个新的Positioned实例，自然能拿到最新的坐标值。

方案1：业务逻辑与视图分离（推荐，适配单/多个动态元素场景） #

不要直接在List里存Widget实例，改为存业务数据模型，build阶段再根据模型生成对应的Widget。这样既可以动态增删元素，又能保证坐标更新时能自动生效，Flutter的diff算法会自动只更新变化的位置属性，不会全量重建组件。
示例代码（单个爱心场景）：

class _MyClass extends State<StatefulWidget> {
  double x = 0.0;
  double y = 0.0;
  // 用标识位控制是否显示爱心，不需要提前存Widget
  bool showHeart = false;

  void _updateLocation(dx, dy) {
    setState(() {
      x = dx;
      y = dy;
    });
  }

  void addHeart() {
    setState(() {
      showHeart = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Demo"),
      ),
      body: Center(
        child: Container(
          child: Stack(
            // 直接在build时生成需要的Positioned，每次重build都会拿最新的x、y
            children: [
              if (showHeart)
                Positioned(
                  top: y,
                  left: x,
                  child: const Icon(
                    Icons.favorite,
                    color: Colors.pink,
                    size: 24.0,
                  ),
                )
            ],
          ),
        ),
      ),
    );
  }
}

如果是需要多个独立移动的爱心，可以定义模型类存储每个爱心的坐标和标识：

// 定义业务模型
class HeartModel {
  final String id;
  double x;
  double y;
  HeartModel({required this.id, required this.x, required this.y});
}

class _MyClass extends State<StatefulWidget> {
  // 存模型列表而非Widget列表
  List<HeartModel> hearts = [];

  // 添加爱心
  void addHeart(double initX, double initY) {
    setState(() {
      hearts.add(HeartModel(id: DateTime.now().toString(), x: initX, y: initY));
    });
  }

  // 更新指定爱心的坐标
  void updateHeartPosition(String id, double newX, double newY) {
    setState(() {
      final targetHeart = hearts.firstWhere((e) => e.id == id);
      targetHeart.x = newX;
      targetHeart.y = newY;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      // 遍历模型动态生成Positioned
      children: hearts.map((heart) {
        return Positioned(
          key: ValueKey(heart.id),
          top: heart.y,
          left: heart.x,
          child: const Icon(Icons.favorite, color: Colors.pink, size: 24),
        );
      }).toList(),
    );
  }
}

方案2：局部刷新优化（最高性能） #

如果不想频繁触发整个页面的setState，可以用ValueNotifier做局部刷新，只有坐标变化的Positioned会更新：

class _MyClass extends State<StatefulWidget> {
  // 用ValueNotifier包装坐标，实现局部监听
  final ValueNotifier<Offset> position = ValueNotifier(const Offset(0, 0));
  bool showHeart = false;

  void _updateLocation(dx, dy) {
    // 不需要调用setState，直接更新notifier的值即可触发局部刷新
    position.value = Offset(dx, dy);
  }

  void addHeart() {
    setState(() {
      showHeart = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Demo")),
      body: Center(
        child: Stack(
          children: [
            if (showHeart)
              ValueListenableBuilder<Offset>(
                valueListenable: position,
                builder: (context, offset, child) {
                  return Positioned(
                    top: offset.dy,
                    left: offset.dx,
                    child: child!,
                  );
                },
                // Icon作为静态child不会被重复重建，进一步提升性能
                child: const Icon(Icons.favorite, color: Colors.pink, size: 24),
              )
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者jbos1234