关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

Flutter页面返回数据传递

发布时间:2023-06-26 19:00:10

问题描述

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

A页面下的跳转

ElevatedButton(  child: const Text("载入设置"),  onPressed: () {  // Listdata = 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 Listtasks;   // TaskListPage(this.tasks);  TaskListPage(this.tasks, this.onTaskTap);   final Function onTaskTap;   @override  Widget build(BuildContext context) {  // 根据 Task 数量动态生成 ElevatedButton  Listbuttons = 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 树中传递数据。


/template/Home/leiyu/PC/Static