Flutter中如何变更Widget父组件且不重建其状态？

你的问题核心有两个：一是颜色在build方法中每次调用都会重新生成，二是旋转时Widget树结构切换（Row→Column）导致Flutter可能无法识别相同的ColorfulBox实例，进而重建State。以下是针对性的修复方案：

1. 将颜色状态保存到State内部 #

把随机颜色的生成逻辑从build方法移到initState中，这样颜色只会在State初始化时生成一次，后续重建不会改变：

class _ColorfulBoxState extends State<ColorfulBox> {
  late Color _boxColor;

  @override
  void initState() {
    super.initState();
    // 仅在State创建时生成一次随机颜色
    _boxColor = getRandomColor();
  }

  @override
  Widget build(BuildContext context) => Container(
        width: 100,
        height: 100,
        color: _boxColor, // 使用保存的颜色
      );
}

2. 给每个ColorfulBox添加唯一Key #

旋转时Row和Column的切换会导致Flutter重新构建子Widget树，给每个ColorfulBox设置唯一Key，让Flutter能够识别出这是同一个Widget实例，从而保留对应的State：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) => Scaffold(
        body: OrientationBuilder(
          builder: (context, orientation) {
            // 移除const，因为Key需要唯一标识，不能共享const实例
            final List<ColorfulBox> children = [
              ColorfulBox(key: const ValueKey('color_box_1')),
              ColorfulBox(key: const ValueKey('color_box_2')),
            ];

            return orientation == Orientation.portrait
                ? Row(children: children)
                : Column(children: children);
          },
        ),
      );
}

为什么之前的方法无效？ #

• 添加Key无效：你之前可能用了const ColorfulBox（导致Key无法唯一区分），或者颜色仍在build方法中动态生成，即使State保留，每次build还是会刷新颜色。
• AutomaticKeepAliveClientMixin无效：这个Mixin主要用于PageView、TabBarView等场景，解决页面切换时的状态保留，不适用于当前Widget树结构切换的场景。

完整修复后的代码 #

import 'dart:math';
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) => Scaffold(
        body: OrientationBuilder(
          builder: (context, orientation) {
            final List<ColorfulBox> children = [
              ColorfulBox(key: const ValueKey('color_box_1')),
              ColorfulBox(key: const ValueKey('color_box_2')),
            ];

            return orientation == Orientation.portrait
                ? Row(children: children)
                : Column(children: children);
          },
        ),
      );
}

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

  @override
  State<ColorfulBox> createState() => _ColorfulBoxState();
}

class _ColorfulBoxState extends State<ColorfulBox> {
  late Color _boxColor;

  @override
  void initState() {
    super.initState();
    _boxColor = getRandomColor();
  }

  @override
  Widget build(BuildContext context) => Container(
        width: 100,
        height: 100,
        color: _boxColor,
      );
}

Color getRandomColor() {
  var generatedColor = Random().nextInt(Colors.primaries.length);
  return Colors.primaries[generatedColor];
}

内容的提问来源于stack exchange，提问作者Michał Jabłoński