如何在flutter中将多个参数从一个页面传递到另一个页面

Question

...
onTap: () {
 Navigator.push(
     context,
     MaterialPageRoute(
      builder: (context) => CategoryPage(
              snapshot.data[index]),
     ));
},
...

使用上面的代码，我尝试将服务 ID 和服务类型传递到类别页面 ... class CategoryPage 扩展了 StatefulWidget { // 最终字符串 serviceId; // 最终字符串 service_type; 最终字符串类别数据；

  CategoryPage(data, {key, this.categorydata}) : super(key: key);

  // @override
  // CategoryPage(categorydata) {
  //   this.serviceId = categorydata.serviceId;
  //   this.service_type = categorydata.serviceId;
  // }

  _CategoryPageState createState() =>
      _CategoryPageState(categorydata.toString());
 }

 class _CategoryPageState extends State<CategoryPage> {
  String id = "";
  _CategoryPageState(String categorydata) {
    this.id = categorydata.serviceId;
  }
...

从上面的代码中，我需要获取服务 ID 和服务类型，并使用服务类型参数显示分类页面的磁贴。请帮助我实现这个结果

Answer 1

import 'package:flutter/material.dart';

class CategoryPage extends StatefulWidget {
  final String serviceId;
  final String service_type;
  final categorydata;
  CategoryPage(
      {Key? key,
      required this.serviceId,
      required this.service_type,
      required this.categorydata})
      : super(key: key);

  @override
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  @override
  void initState() {
    print(widget.service_type);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: null,
    );
  }
}

你可以通过widget.varname

直接访问这些变量

Answer 2

首先，如果您想在Category Widget 中获取2 个参数，您应该从上一页传递2 个参数。（我强烈建议使用 class。如果你想传递的项目彼此相关或可以通过某些标准绑定，请创建一个新的 class。你实例化这个 class , 就可以pass get了，用起来比较舒服，可读性也比较好。不过以后可能吧，需要时间去适应。)

...
onTap: () {
 Navigator.push(
     context,
     MaterialPageRoute(
      builder: (context) => CategoryPage(
              snapshot.date[index].id,
              snapshot.data[index].service_type),
              // snapshot.data[index] ----- replaced with two lines above),
     ));
},
...

并且需要定义serviceId和serviceType变量来获取之前传递的参数。

class CategoryPage extends StatefulWidget {
  final String serviceId;
  final String serviceType;
   
  CategoryPage(this.serviceId, this.serviceType);

然后您可以像这样使用您的 serviceId 和 serviceType：

class _CategoryPageState extends State<CategoryPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('ID: ${widget.serviceId}'), // widget. needs to be followed by serviceId
    );
  }
}

或者您可以定义一个新变量并将'serviceId'放入其中。

class _CategoryPageState extends State<CategoryPage> {
 var id = widget.serviceId;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('ID: ${id}'), // 
    );
  }
}

Answer 3

您必须使用 CategoryPage 构造函数中的 categorydata 参数像这样传递数据。

onTap: () {
 Navigator.push(
     context,
     MaterialPageRoute(
      builder: (context) => CategoryPage(
             categorydata: snapshot.data[index]),
     ));
},

这里你需要在你的 StatefulWidget class 中定义一个 final 变量，并从构造函数中初始化它；

CategoryPage({key,required this.categorydata}) : super(key: key);

final Album categorydata;

_CategoryPageState createState() =>
    _CategoryPageState();
}

然后您可以使用 widget 关键字 class 从 State class 方法访问它，您不需要传递它。

 class _CategoryPageState extends State<CategoryPage> {


   @override
  void initState() {
    super.initState();
    // access them from here

   final categorydata = widget.categorydata;
   final String serviceId = categorydata.service_id;
   final String service_type = categorydata. service_type;

  }

  @override
  Widget build(BuildContext context) {
    // access them from here
    final categorydata = widget.categorydata;
    final String serviceId = categorydata.service_id;
    final String service_type = categorydata. service_type;
   }

  }

如何在flutter中将多个参数从一个页面传递到另一个页面

How to pass many parameters from one page to another in flutter

parameters

class

dart

flutter

materialpageroute