Flutter跨Stateful类修改变量后Widget不更新的解决方法

• 你的写法不符合Flutter的状态管理逻辑，核心错误有3个：
  1. 在second组件点击事件里新创建的first实例，和页面上正在渲染的first组件没有任何关联，修改它的属性不会影响页面展示
  2. StatefulWidget的属性默认是不可变的，可变状态必须放在对应的State类中维护，不能直接修改组件实例的属性
  3. 在build方法里直接调用setState((){})会触发无限重绘，属于严重逻辑错误

方案1：父组件托管状态（适合组件层级较近的场景） #

将共享状态放到两个组件的共同父组件中维护，通过回调把修改状态的方法传递给子组件即可，示例代码如下：

// 两个组件的共同父组件
class ParentWidget extends StatefulWidget {
  const ParentWidget({super.key});

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _showHello = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FirstWidget(showHello: _showHello),
        SecondWidget(onTap: () => setState(() => _showHello = true)),
      ],
    );
  }
}

// 展示文本的组件
class FirstWidget extends StatelessWidget {
  final bool showHello;
  const FirstWidget({super.key, required this.showHello});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: showHello ? const Text('Hello') : const Text('check'),
    );
  }
}

// 带点击按钮的组件
class SecondWidget extends StatelessWidget {
  final VoidCallback onTap;
  const SecondWidget({super.key, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: IconButton(
        icon: const Icon(Icons.click),
        onPressed: onTap,
      ),
    );
  }
}

方案2：ValueNotifier + ValueListenableBuilder（适合跨组件轻量状态共享） #

如果两个组件层级较远，不想层层传递回调，可以用原生提供的轻量状态监听方案：

// 在上层定义可监听的状态对象
final showHelloNotifier = ValueNotifier<bool>(false);

// 展示文本的组件
class FirstWidget extends StatelessWidget {
  const FirstWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<bool>(
      valueListenable: showHelloNotifier,
      builder: (context, value, child) {
        return Container(
          child: value ? const Text('Hello') : const Text('check'),
        );
      },
    );
  }
}

// 带点击按钮的组件
class SecondWidget extends StatelessWidget {
  const SecondWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: IconButton(
        icon: const Icon(Icons.click),
        onPressed: () {
          showHelloNotifier.value = true;
        },
      ),
    );
  }
}

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