Flutter 在不同頁面上同一小部件的兩個實例之間同步 state

Question

我有一個關於我的用例的問題：假設我們當前在屏幕 A 上，它顯示了我的圖表小部件的一個實例（除其他外）。 我想讓用戶有機會通過點擊右上角的“全屏”按鈕在整個應用程序屏幕上顯示該圖表。 單擊全屏按鈕時，我推送一個新的MaterialPageRoute並在整個屏幕（屏幕 B）上顯示圖表的相同小部件實例。

但是我錯過了一些重要的事情，那就是全屏小部件應該與原始小部件保持同步。 即如果用戶在全屏模式下進行任何修改，關閉全屏模式后，原始圖表應該與全屏圖表在同一個state。 我目前不知道如何實現這一目標。 我嘗試對兩者使用相同的 GlobalKey，但沒有成功。 有什么提示嗎？

屏幕 A：

屏幕 B：

一些代碼：

我的Fullscreenable小部件可以在新頁面的完整腳手架主體上顯示任何小部件：

class Fullscreenable extends StatelessWidget {
  final String name;
  final Widget child;

  const Fullscreenable({
    Key? key,
    required this.child,
    this.name = "",
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        Positioned(
          top: -12,
          right: -12,
          child: IconButton(
            // visualDensity: VisualDensity.compact,
            padding: EdgeInsets.zero,
            icon: const Icon(Icons.fullscreen),
            onPressed: () {
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(
                  builder: (BuildContext context) => FullScreenView(
                      title: name,
                      child: child,
                    ),
                  // fullscreenDialog: true,
                ),
              );
            },
          ),
        )
      ],
    );
  }
}

屏幕 A：

...
Column(
  children: [
    Fullscreenable(
      name: "This is the title",
      child: MyChart()
    ),
    ...
  ],
)
...

屏幕 B（ FullscreenView ）：

class FullScreenView extends StatelessWidget {
  final String title;
  final Widget child;

  const FullScreenView({Key? key, required this.child, this.title = ""})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        toolbarHeight: 48,
      ),
      body: child,
    );
  }
}

Answer 1

作為本機解決方案，您可以考慮ValueNotifier和ValueListenableBuilder 。 或者實施一些 state 經理。