Flutter 中的 State 变量和 Widget 变量之间有联系吗？

Question

我有以下问题：

我有一个 Stafeful 小部件，我在其中传递了参数 [Text('Test1'), Text('Test2')]：

class FirstWidget extends StatefulWidget {
  final List<Text> names;
  const FirstWidget(this.names);

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

class _FirstWidgetState extends State<FirstWidget> {
  late List<Text> stateNames;

  @override
  void initState() {
    stateNames = widget.names;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        child: Text('Click Me'),
        onPressed: () {
          stateNames.add(Text('This is the new Test3'));
          print('STATE: $stateNames');
          print('WIDGET: ${widget.names}');
        },
      ),
    );
  }
}

当我按下按钮时，一个新的文本小部件被添加到列表中，我在控制台中得到以下打印：

STATE: [Text("Test1"), Text("Test2"), Text("This is the new Test3")]
WIDGET: [Text("Test1"), Text("Test2"), Text("This is the new Test3")]

我不明白，因为我只是将 Text 添加到 stateNames 变量中。 widget.names和stateNames之间的联系在哪里？？ 我希望这个输出：

STATE: [Text("Test1"), Text("Test2"), Text("This is the new Test3")]
WIDGET: [Text("Test1"), Text("Test2")]

如何防止这种行为，小部件变量也被更改？

Answer 1

您引用的是stateNames。

通过更改 stateNames 的内容，widget.names 也会发生相同的情况。

• 为防止这种情况发生，您必须将widget.name 的副本分配给initState 中的stateNames。

• 你可以通过像这样的扩展运算符来简单地做到这一点

  @override
  void initState() {
    stateNames = [...widget.names];
    super.initState();
  }

• 您可以这样做：

  @override
  void initState() {
    stateNames = widget.names.toList();
    super.initState();
  }

• 或者你可以这样做

  @override
  void initState() {
    stateNames = List.from(widget.names);
    super.initState();
  }