Flutter页面返回数据传递

问题描述

从A页面跳转到B页面后，在B页面操作后，退出B页面时回到A页面时返回一些数据给A页面

A页面下的跳转

ElevatedButton(
    child: const Text("载入设置"),
    onPressed: () {
    
    
        // List<Task>  data = await _dbProvider.getAll();
        _dbProvider.getAll().then((value) => {
    
    
        // 跳转到新页面
        Navigator.push(context, MaterialPageRoute(builder: (context) {
    
    
        return TaskListPage(value,(index){
    
    
            // Navigator.push(context, ...) // 根据 index 跳转
            print("index=$index");
        }); // 传入 Task 列表
        }))
        });
    },
),

新页面

// 新页面
class TaskListPage extends StatelessWidget {
    
    
  final List<Task> tasks;

  // TaskListPage(this.tasks);
  TaskListPage(this.tasks, this.onTaskTap);

  final Function onTaskTap;

  @override
  Widget build(BuildContext context) {
    
    
    // 根据 Task 数量动态生成 ElevatedButton
    List<Widget> buttons = tasks.map((task) {
    
    
      return ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.blue,
            shape: CircleBorder(),
          ),
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center, //居中对齐
              children: [
                Icon(Icons.people),
                Text(task.title)
              ]
          ),
          onPressed: () {
    
    
            // 点击事件
            onTaskTap(tasks.indexOf(task));
            Navigator.of(context).pop();
          }
      );
    }).toList();

    // 使用 GridView 实现网格布局
    return Scaffold(
        body: GridView.count(
            crossAxisCount: 3,
            children: buttons,
            padding: EdgeInsets.fromLTRB(10,40,20,10), // 添加 20 的内边距
            // padding: EdgeInsets.symmetric(horizontal: 20),
            crossAxisSpacing: 20 ,     // 设置行列间距为 20
        )
    );
  }
}

主要步骤说明

1、B页面中在TaskListPage 类中添加构造函数TaskListPage(this.tasks, this.onTaskTap);
final Function onTaskTap;
2、A页面在跳转到B页面时，传入要接受数据的变量

        return TaskListPage(value,(index){
    
    
            // Navigator.push(context, ...) // 根据 index 跳转
            print("index=$index");
        }); // 传入 Task 列表

结果

点击B页面从数据库里读取出来的数据后，会返回告知A页面，点击了第几个

这只是一个简单的方式，推荐使用Provider， Provider是一个 Flutter 官方推荐的状态管理方案,主要用于在 Widget 树中传递数据。