我该怎么做才能在单击图标时打开另一个页面文件

Question

我该怎么做才能在单击图标时打开另一个页面文件？我有这个图标，当你点击它们时它会将你重定向到一个网址，我想这样做当你点击一个特定的图标而不是打开一个网址时它会打开另一个页面文件，就像一个 navigator.push ...

但是，当我将 ontap 添加到我的任务卡时，出现错误“未定义命名参数‘onTap’”，我的代码是这样的：

import 'dart:ui';
import 'package:url_launcher/url_launcher.dart';
import '';
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:schoolmanagement/nav_bar.dart';


class DinningScreen extends StatefulWidget {
  const DinningScreen({super.key});

  @override
  State<DinningScreen> createState() => _DinningState();

}

class _DinningState extends State<DinningScreen> {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: NavBar(),
      key: scaffoldKey,
      appBar: AppBar(...),

body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Color(0xffF6FECE), Color(0xffB6C0C8)],
              begin: Alignment.bottomCenter,
              end: Alignment.topCenter,
              tileMode: TileMode.clamp),
        ),

        //Here we set the "Manage your ... box and it's properties"
        padding: const EdgeInsets.all(12.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(...),

SizedBox(
                height: 20.0,
              ),
              Text(
                "Sections",
                style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    fontFamily: "SpaceGrotesk",
                    color: Colors.black),
              ),

              //Here we set the "Shortcuts"

              //If you click Teachers it will take you the page where you can see the Teachers -
              //names a nd availabity alongs side the subject they teach
              //If you click EduPage it takes you to edupage
              //If you click Timetable it takes you to the Timetable generator
              //If you click Messages it asks you to join a messenger Gc of Students of your class
              Row(
                children: [
                  Expanded(
                      child: TaskCard(
                        label: "Teachers",
                        pageUrl: "",
                      )),
                  Expanded(
                      child: TaskCard(
                        imageUrl: "assets/school-bag.png",
                        label: "EduPage",
                        pageUrl: "https://willowcosta.edupage.org",
                      )),

//This is what I want to change from going to url to another page

          Expanded(
              child: TaskCard(
                imageUrl: "assets/timetable.png",
                pageUrl: "https://www.asctimetables.com",
                label: "Timetable",
              )),
          Expanded(
              child: TaskCard(
                imageUrl: "assets/message.png",
                pageUrl: "https://www.messenger.com",
                label: "Messages",
              )),
        ],
      ),

      //Here we set the tasks that we have
      const SizedBox(
        height: 20.0,
      ),
      const Text(
        "You have 6 tasks for this week",
        style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
            fontFamily: "SpaceGrotesk",
            color: Colors.black),
      ),
      const TaskContainer(),
      const TaskContainer(),
      const TaskContainer(),
      const TaskContainer(),
      const TaskContainer(),
      const TaskContainer(),
      const SizedBox(
        height: 100.0,
      ),
    ],
  ),
),

),

任务卡定义在这里：

class TaskCard extends StatelessWidget {
  final String? imageUrl;
  final String? label;
  final String pageUrl;
  const TaskCard(
      {Key? key, this.imageUrl, required this.label, required this.pageUrl})
      : super(key: key);

//Function to  launch the selected url
  Future<void> goToWebPage(String urlString) async {
    final Uri _url = Uri.parse(urlString);
    if (!await launchUrl(_url)) {
      throw 'Could not launch $_url';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      //Here we set the properties of our Sections (Teachers etc)
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          Container(
            height: 80.0,
            width: 76.1,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20.0),
                boxShadow: [
                  BoxShadow(
                      color: Colors.grey, blurRadius: 2.0, spreadRadius: 0.5),
                ]),
            child: IconButton(
              onPressed: () async {
                await goToWebPage(pageUrl);
              },
              icon: Image.asset(
                imageUrl ?? "assets/teacher.png",
                height: 75.0,
                width: 70.0,
              ),
            ),
          ),
          SizedBox(
            height: 10.0,
          ),
          Text(
            label ?? "",
            style: TextStyle(fontSize: 16.0),
          )
        ],
      ),
    );
  }
}

Answer 1

将 InkWell 包裹在您的 TaskCard 中。

child: InkWell(
    onTap: () {
        // Function is executed on tap.
    },
    child:TaskCard(...),
  ),