Flutter中PageView内不同Container页面间如何传递数据

你的两个PageView子页面同属一个父State管理，最轻量的实现方式是用状态提升的思路，把需要跨页面传递的数据存在父组件的状态变量中，第一个页面更新数据，第二个页面直接读取即可，无需额外依赖。

具体实现步骤 #

• 第一步：在父State类中定义需要跨页面传递的状态变量
• 第二步：在第一个页面的跳转按钮点击事件中，先更新状态变量的值，再通过PageController切换到第二个页面
• 第三步：第二个页面直接读取父组件中的状态变量渲染内容

修改后的完整可运行代码 #

import 'package:flutter/material.dart';

void main() => runApp(TestClass());

class TestClass extends StatefulWidget {
  @override
  _TestClassState createState() => _TestClassState();
}

class _TestClassState extends State<TestClass> {
  final pagecontroller = PageController();
  // 定义需要跨页面传递的状态变量
  String transferText = "";
  int transferNum = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text("PageView Demo"),
        ),
        body: PageView(
          controller: pagecontroller,
          scrollDirection: Axis.horizontal,
          children: [
            // 第一个页面 Container-1
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    child: Text(
                      "First Container-1",
                      style: TextStyle(fontSize: 28),
                    ),
                  ),
                  RaisedButton(
                    child: Text(
                      'Navigate to Container-2 >>',
                      style: TextStyle(fontSize: 24.0),
                    ),
                    onPressed: () {
                      setState(() {
                        // 在这里赋值你需要传递的实际业务数据
                        transferText = "从第一页传递过来的文本";
                        transferNum = 1024;
                      });
                      // 切换到第二个页面（页面索引从0开始，第二页索引为1）
                      pagecontroller.animateToPage(
                        1,
                        duration: Duration(milliseconds: 300),
                        curve: Curves.easeInOut
                      );
                    },
                  ),
                ],
              ),
            ),
            // 第二个页面 Container-2
            Center(
              child: Container(
                child: Text(
                  "Second Container-2 \n接收到的文本：$transferText \n接收到的数值：$transferNum",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 28),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

复杂场景可选方案 #

如果后续你的PageView页面数量增多、数据交互逻辑变复杂，可以根据业务场景选择对应方案：

• 页面拆分为独立组件时，可以通过组件构造函数传递参数，注意配合setState触发子组件刷新
• 多页面共享同一份数据时，可以用InheritedWidget或者轻量状态管理库做局部/全局状态共享，避免层层传值的冗余代码
• 注意PageView的页面切换是组件层级的切换，不是路由栈的push/pop，不要用普通路由传参的方式实现跨页传值。

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