flutter 我如何使多个图标去不同的网址

u3r8eeie  于 2022-11-25  发布在  Flutter
关注(0)|答案(1)|浏览(170)

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

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

`
显示错误:x1c 0d1x,父图标的代码为:

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:

我的应用程序看起来像这样:

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

ldioqlga

ldioqlga1#

parent icon中,您可以在构造函数中定义新的字符串变量,并将其命名为pageUrl,就像其他两个变量imageUrllabel一样,现在使用它如下:

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

然后像这样传递:

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

   ),
),

任务卡类的完整示例:

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),
          )
        ],
      ),
    );
  }
}

相关问题