Flutter 页面跳转及传值

本文实现了页面跳转，在跳转过程中传值给下一个页面并返回到之前页面。

文中使用了三个文件，包括两个页面和一个数据文件。

数据文件listData.dart

List listData=[
  {
    "patrol_plan_name": 'TSD-8351',
    "address": '郑州大学与文化路交叉口向南100米',
    "remainder_days": '5天'
  },
  {
    "patrol_plan_name": 'ASD-8352',
    "address": '郑州大学与学府路交叉口向南100米',
    "remainder_days": '6天'
  },
  {
    "patrol_plan_name": 'AAX-8353',
    "address": '中州大道与文化路交叉口向南100米',
    "remainder_days": '15天'
  },
]

如果接收页面为StatelessWidget

发送页面 Patrol.dart

import 'package:flutter/material.dart';
import 'package:flutter_app1111/res/listData.dart';
import 'package:flutter_app1111/pages/PatrolTask.dart';


class PatrolPage extends StatelessWidget{

  //自定义方法
  Widget _getListData(context, index){
      return ListTile(
        title: Text(listData[index]["patrol_plan_name"]),
        subtitle: Text(
                    listData[index]["address"],
                    style: new TextStyle(
                    color: Colors.grey[500],
                  ),
                  overflow: TextOverflow.ellipsis,),
        trailing: Text(listData[index]["remainder_days"]),
        onTap: (){
          Navigator.of(context).push(
              MaterialPageRoute(builder: (context)=>PatrolTaskPage(each_data: listData[index]))
          );
        },
      );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: listData.length,
      itemBuilder: this._getListData,
    );
  }

接收页面PatrolTask.dart

import 'package:flutter/material.dart';

class PatrolTaskPage extends StatelessWidget{
  
      final Map<String, String> each_data ;
      PatrolTaskPage({this.each_data});
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("${each_data["patrol_plan_name"]}"),
      ),
      body: ListTile(
        title: Text("${each_data["address"]}"),
        subtitle: Text("${each_data["remainder_days"]}"),
        onTap: (){
          _backCurrentPage(context);
        },
      ),
    );
  }

  void _backCurrentPage(BuildContext context){
    Navigator.pop(context);
  }
}

页面间跳转主要通过配置路由，首先发送页面设置点击事件。

onTap: (){
          Navigator.of(context).push(
              MaterialPageRoute(builder: (context)=>PatrolTaskPage(each_data: listData[index]))
          );
        },

如果想要传值，需要根据数据类型提前在接受页面定义一个参数接受数据，例如我定义的each_data

final Map<String, String> each_data ;
      PatrolTaskPage({this.each_data});

然后在接受页面使用this.each_data就可以收到数据。

如果接收页面为StatefulWidget

class PatrolTaskPage extends StatefulWidget{

  final Map<String, String> each_data;
  PatrolTaskPage(this.each_data);

  _PatrolTaskPageState createState() => _PatrolTaskPageState();
}

class _PatrolTaskPageState extends State<PatrolTaskPage> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "${widget.each_data["patrol_plan_name"]}",
          textAlign: TextAlign.center,
          style: TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

则需要按这种方式接收数据，同时发送页面中也需要进行一定的修改

Navigator.of(context).push(
              MaterialPageRoute(builder: (context)=>PatrolTaskPage(listData[index]))
          );

最终效果

Flutter 页面跳转及传值

猜你喜欢