为何Flutter中State的int变量传递后能影响Widget的变量？

基础Dart代码测试 #

我写了一段简单的Dart代码测试int类型的传递：

a(int x) {
  x++;
  print(x);
}

main() {
  int x = 1;
  a(x);
  print(x);
}

输出：

2
1

这说明int作为值类型，传递的是副本，两个变量互不影响。

Flutter中的矛盾场景 #

但在下面的Flutter程序中，State里的int变量通过构造函数传递后，似乎能影响Widget的int变量：

import 'package:flutter/material.dart';

class CounterDisplay extends StatelessWidget {
  const CounterDisplay({required this.count, super.key});

  final int count;

  @override
  Widget build(BuildContext context) {
    return Text('Count: $count');
  }
}

class CounterIncrementor extends StatelessWidget {
  const CounterIncrementor({required this.onPressed, super.key});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: const Text('Increment'),
    );
  }
}

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      ++_counter;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        CounterIncrementor(onPressed: _increment),
        const SizedBox(width: 16),
        CounterDisplay(count: _counter),
      ],
    );
  }
}

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Counter(),
        ),
      ),
    ),
  );
}

这段代码里，通过CounterDisplay(count: _counter)传递int类型，按之前的认知应该是两个独立的int，为什么_CounterState中的_counter变化会影响CounterDisplay中的count？

原因解析 #

核心在于Flutter的状态更新机制，而非值传递规则改变：

• Dart里int作为值类型，传递的始终是副本，这点没有变。
• 当调用setState时，Flutter会标记当前State对应的Widget需要重建，重新执行build方法。
• 在新的build执行中，会创建新的CounterDisplay实例，此时传递的是更新后的_counter值，而非修改原来那个CounterDisplay实例里的count。
• 你看到的count变化，是因为旧的CounterDisplay被丢弃，新的实例用了最新的数值渲染，并非同一个实例的变量被修改。

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