Flutter页面传值需求：A页数据同步至C/D/E页且仅跳转B页

核心思路 #

数据流转必须遵循 A → B → C/D/E 的路径：先将A页数据传递给B页，再由B页把数据分发到C、D、E页面，同时通过回调函数接收CDE页面DropdownButton的选中值。

1. 确认B页面接收A页数据 #

先保证B页面的构造函数能正确接收A传来的数据：

class B_page extends StatefulWidget {
  final YourDataType data; // 替换为你的实际数据类型
  const B_page({super.key, required this.data});

  @override
  State<B_page> createState() => _B_pageState();
}

class _B_pageState extends State<B_page> {
  // 存储C、D、E页面的选中值
  String? c_value;
  String? d_value;
  String? e_value;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('B Page')),
      body: Column(
        children: [
          // 跳转至C页面，传递A的数据并绑定回调
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => C_page(
                    initialData: widget.data,
                    onSelected: (value) => setState(() => c_value = value),
                  ),
                ),
              );
            },
            child: const Text('进入C页面'),
          ),
          // D、E页面的跳转逻辑完全一致
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => D_page(
                    initialData: widget.data,
                    onSelected: (value) => setState(() => d_value = value),
                  ),
                ),
              );
            },
            child: const Text('进入D页面'),
          ),
        ],
      ),
    );
  }
}

2. 实现C页面（D、E页面同理） #

C页面需要接收B传来的初始数据，并用回调将选中值传回B：

class C_page extends StatefulWidget {
  final YourDataType initialData; // 接收A→B传递的数据
  final Function(String value) onSelected; // 回调函数传递选中值

  const C_page({super.key, required this.initialData, required this.onSelected});

  @override
  State<C_page> createState() => _C_pageState();
}

class _C_pageState extends State<C_page> {
  String? selectedValue;

  @override
  void initState() {
    super.initState();
    // 用A页的数据初始化Dropdown选中值
    selectedValue = widget.initialData.defaultCValue; // 根据你的数据结构调整
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('C Page')),
      body: Center(
        child: DropdownButton<String>(
          value: selectedValue,
          // 从A页数据中获取下拉选项
          items: widget.initialData.cOptions.map((option) {
            return DropdownMenuItem(value: option, child: Text(option));
          }).toList(),
          onChanged: (value) {
            if (value == null) return;
            setState(() => selectedValue = value);
            widget.onSelected(value); // 将选中值回传给B页面
          },
        ),
      ),
    );
  }
}

3. 如果C、D、E是B的子组件（而非独立页面） #

如果CDE是B页面内的子组件（比如Tab页），直接将数据和回调传入控制器即可：

// 在B页面的build方法中
TabBarView(
  children: [
    C_controller(
      initialData: widget.data,
      onSelected: (value) => setState(() => c_value = value),
    ),
    D_controller(
      initialData: widget.data,
      onSelected: (value) => setState(() => d_value = value),
    ),
    E_controller(
      initialData: widget.data,
      onSelected: (value) => setState(() => e_value = value),
    ),
  ],
)

关键注意事项 #

• 严格遵循A→B→C/D/E的跳转路径，禁止直接从A跳转至CDE
• 通过回调函数实现CDE到B的状态同步，若需要将最终值传回A，可在B页面返回时通过Navigator.pop携带数据
• 根据你的实际数据结构调整YourDataType、defaultCValue、cOptions等字段名

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