Flutter页面返回数据传递

2023-06-26 89

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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 列表