flutter - 如何在 Flutter 中向 Card 中添加导航路线

Question

在下面的代码中，我在卡片上有一个方法 myMenu。点击卡片时如何导航到另一个页面？将有几个这样的卡片将链接到它自己的页面内容。每次我添加一个函数时，它都会给出一个错误。我该如何正确操作？

import 'package:flutter/material.dart';
import 'package:tarjous_app/gridview_demo.dart';

void main(List<String> args) {
  runApp(
      new MaterialApp(home: TarjousAle(), debugShowCheckedModeBanner: false));
}

class TarjousAle extends StatefulWidget {
  @override
  _TarjousAleState createState() => _TarjousAleState();
}

class _TarjousAleState extends State<TarjousAle> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text("Study Plan"),
        backgroundColor: Colors.amber,
      ),
      body: Container(
        child: GridView.count(
          crossAxisCount: 3,
          children: <Widget>[
            MyMenu(
              title: "Records",
              icon: Icons.account_balance_wallet,
              shape: Colors.brown,
            ),
            MyMenu(
              title: "Academy",
              icon: Icons.account_balance,
              shape: Colors.grey,
            ),
          ],
        ),
      ),
    );
  }
}

class MyMenu extends StatelessWidget {
  MyMenu({this.title, this.icon, this.shape});

  final String title;
  final IconData icon;
  final MaterialColor shape;

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(9.0),
      child: InkWell(           
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => GridViewDemo()),
      ),
        splashColor: Colors.amberAccent,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(
                icon,
                size: 80.0,
                color: shape,
              ),
              Text(title, style: new TextStyle(fontSize: 18.0))
            ],
          ),
        ),
      ),
    );
  }
}

在墨水池小部件中，我添加了一个适用于所有卡片的功能。但我真的希望每张卡片都能导航到自己的页面。例如，记录应该导航到其自己的记录页面，对于学院到学院页面也是如此

Answer 1

您可以在构造函数中接收页面，然后转到该页面，如下所示:

class MyMenu extends StatelessWidget {
  MyMenu({this.title, this.icon, this.shape, this.page});

  final Widget page;
  ...
}

然后，在onTap中:

onTap: () => Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => page),
)

所以现在你可以这样做了:

MyMenu(
  ...
  page: GridViewDemo1(),
),
MyMenu(
  ...
  page: GridViewDemo2(),
)