如何使多个图标转到不同的网址

Question

我的应用程序有一些图标，问题是我将图标设置为一个图标的扩展名/父项，因此当我设置一个图标以转到某个网址时，所有其他图标也会转到该网址。但这不是我想要的，我希望每个图标都转到单独的网址。扩展图标的代码是：`

 Row(
                children: [
                  Expanded(
                      child: TaskCard(
                    label: "Teachers",
                  )),
                  Expanded(
                      child: TaskCard(
                    imageUrl: "assets/school-bag.png",
                    label: "EduPage",
                    pageUrl: "https://willowcosta.edupage.org",
                  )),

`

显示错误： 父图标的代码是：

 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",
                  )),
                  Expanded(
                      child: TaskCard(
                    imageUrl: "assets/school-bag.png",
                    label: "EduPage",
                    pageUrl: "https://willowcosta.edupage.org",
                  )),
                  Expanded(
                      child: TaskCard(
                    imageUrl: "assets/timetable.png",
                    label: "Timetable",
                  )),
                  Expanded(
                      child: TaskCard(
                    imageUrl: "assets/message.png",
                    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,
              ),
            ],
          ),
        ),
      ),
      bottomSheet: const BottomSheetCard(),
    );
  }
}

//hier the first class ends

class TaskCard extends StatelessWidget {
  final String? imageUrl;
  final String? label;
  const TaskCard({Key? key, this.imageUrl, this.label}) : 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),
          )
        ],
      ),
    );
  }
}

显示错误2： 我的应用程序如下所示：

我希望每个图标都能带我到不同的网站

Answer 1

在您的parent icon构造函数中，您可以定义新的字符串变量，并将其命名pageUrl为像其他两个变量一样imageUrl，label现在使用它：

onPressed: () async {
   await goToWebPage(pageUrl);
},

然后像这样传递：

Expanded(
   child: TaskCard(
        imageUrl: "assets/school-bag.png",
        label: "EduPage",
        pageUrl: "https://willowcosta.edupage.org",

   ),
),

TaskCard 类的完整示例：

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      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);//<-- add this
              },
              icon: Image.asset(
                imageUrl ?? "assets/teacher.png",
                height: 75.0,
                width: 70.0,
              ),
            ),
          ),
          SizedBox(
            height: 10.0,
          ),
          Text(
            label ?? "",
            style: TextStyle(fontSize: 16.0),
          )
        ],
      ),
    );
  }
}