Flutter：如何获取父控件变量？

Question

我使用下面的示例来测试和学习如何从子窗口小部件调用父函数。当您单击 时TestButton，countRefresh将调用该函数，并且变量count会增加 1。现在，每次单击按钮时都会更改颜色（蓝色或红色）。

问题：假设我希望颜色根据count变量周围的某些逻辑进行更改，如何count从小TestButton部件内访问变量？例如，如果count是三的倍数，则按钮应为红色，否则为蓝色。

我读到了有关 InheritedWidgets 的内容，但似乎变量在 InheritedWidgets 中必须是final的（如果我在int count = 0;收到“此类被标记为不可变”消息错误之前没有放置final）。但根据这个例子，count每次单击按钮时我都需要更改。InheritedWidgets 的替代方案是什么？

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  static const String id = 'test';
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  int count = 0;
  Color color = Colors.red;

  void refreshCount() {
    setState(() {
      count += 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:
            Text('The button was pressed $count time${count == 1 ? '' : 's'}'),
      ),
      floatingActionButton: TestButton(
        color: color,
        notifyParent: refreshCount,
      ),
    );
  }
}

class TestButton extends StatefulWidget {
  TestButton({
    @required this.color,
    @required this.notifyParent,
  });
  final Color color;
  final void Function() notifyParent;
  @override
  _TestButtonState createState() => _TestButtonState();
}

class _TestButtonState extends State<TestButton> {
  Color color;
  void initState() {
    color = widget.color;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        widget.notifyParent();
        setState(() {
          color = color == Colors.red ? Colors.blue : Colors.red;
        });
      },
      child: Container(
        child: Icon(
          Icons.add,
          size: 80,
        ),
        color: color,
      ),
    );
  }
}

Answer 1

我希望颜色根据计数变量周围的一些逻辑进行更改，如何从 TestButton 小部件中访问计数变量？例如，如果计数是三的倍数，则按钮应为红色，否则为蓝色。

你需要将这个count价值观传递给孩子，让孩子根据这个价值观来构建自己。

不要尝试访问父窗口小部件。在声明式编程中，您只能更新状态和重建树。

这是一个关于 Flutter 状态管理的精彩视频：https://www.youtube.com/watch? v=HrBiNHEqSYU