Dart 颤振转盘图像滑块在点击事件期间打开单独的页面称为

我是个新手。我想问一个关于我的代码的问题。我在youtube和一些谷歌教程上看到了这个inkwell和on-tap函数，可以在Flitter上打开新的类活动。但结果是，当点击图像时，会打开不同的图像屏幕，但它们共享相同的类文件

如何为不同的图像单击创建单独的页面。例如 我的颤振转盘滑块中有五个图像。 图1将打开幻灯片页1。图像2将打开幻灯片页面2，以此类推。这意味着它们位于单独的页面上，而不是不同的图像打开同一页面，但只显示不同的图像。我正在尝试这个教程，但他们有相同的页面，但不同的图像显示后点击事件被调用。网址

class\u HomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
Widget image_carousel=新容器(
高度：345.0，
儿童：新旋转木马(
boxFit:boxFit.fill，
图像：[
资产折旧（“资产/s7.jpg”），
资产折旧（“资产/s3.jpg”），
资产折旧（“资产/s5.jpg”），
资产折旧（“资产/s2.jpg”），
资产折旧（“资产/s4.jpg”），
],
自动播放：对，
动画曲线：Curves.FastOutSwowin，
animationDuration:持续时间（毫秒：500），
dotColor:Colors.red[50]，
dotSize:4.0，
指示符号RBGPAdd:2.0，
),
);
返回脚手架(
正文：新栏目(
儿童：[
图像传送带，
//网格视图
容器(
身高：163.0，
子：产品（），
)
],
),
);
}
}

---

在这段代码中，这段代码只显示旋转木马图像，没有任何点击事件，我希望在点击图像资产并导航到不同页面时，会发生不同的点击事件

首先，您需要安装，然后创建两个屏幕：

第一个将包含旋转木马滑块，当您点击图像时，它将导航到第二个屏幕并传递您点击的图像的图像URL，要进行点击事件，您需要使用

gesturedetor

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import './image_screen.dart';

void main() => runApp(MaterialApp(home: Demo()));

class Demo extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    Widget image_carousel = new Container(
        height: 345.0,
        child: CarouselSlider(
          height: 400.0,
          items: [
            'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
            'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
            'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
            'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg'
          ].map((i) {
            return Builder(
              builder: (BuildContext context) {
                return Container(
                    width: MediaQuery.of(context).size.width,
                    margin: EdgeInsets.symmetric(horizontal: 5.0),
                    decoration: BoxDecoration(color: Colors.amber),
                    child: GestureDetector(
                        child: Image.network(i, fit: BoxFit.fill),
                        onTap: () {
                          Navigator.push<Widget>(
                            context,
                            MaterialPageRoute(
                              builder: (context) => ImageScreen(i),
                            ),
                          );
                        }));
              },
            );
          }).toList(),
        ));

    return Scaffold(
      body: new Column(
        children: <Widget>[
          image_carousel,
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:carousel_slider/carousel_slider.dart”；
导入“/image_screen.dart”；
void main（）=>runApp（MaterialApp（home:Demo（））；
类Demo扩展StatefulWidget{
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
Widget image_carousel=新容器(
高度：345.0，
儿童：旋转滑翔机(
高度：400.0，
项目：[
'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
'http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
'http://photo.16pic.com/00/38/88/16pic_3888084_b.jpg'
].地图（（i）{
返回生成器(
生成器：（BuildContext上下文）{
返回容器(
宽度：MediaQuery.of（context）.size.width，
边缘：边缘组。对称（水平：5.0），
装饰：盒子装饰（颜色：颜色。琥珀色），
儿童：手势检测器(
子项：Image.network（i，fit:BoxFit.fill），
onTap:（）{
导航器。推(
上下文
材料路线(
生成器：（上下文）=>ImageScreen（i），
),
);
}));
},
);
}).toList（），
));
返回脚手架(
正文：新栏目(
儿童：[
图像传送带，
],
),
);
}
}

第二个屏幕将仅包含您单击的图像：

import 'package:flutter/material.dart';

class ImageScreen extends StatefulWidget {
  final String url;
  ImageScreen(this.url);

  @override
  _MyImageScreen createState() => _MyImageScreen(url);
}

class _MyImageScreen extends State<ImageScreen> {
  final String url;
  _MyImageScreen(this.url);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ImageScreen'),
        ),
        body: Image.network(url, width: double.infinity));
  }
}

导入“包装：颤振/材料.省道”；
类ImageScreen扩展StatefulWidget{
最终字符串url；
ImageScreen（this.url）；
@凌驾
_MyImageScreen createState（）=>\u MyImageScreen（url）；
}
类_MyImageScreen扩展状态{
最终字符串url；
_MyImageScreen（this.url）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“图像屏幕”），
),
正文：Image.network（url，宽度：double.infinity））；
}
}

谢谢您的回答。让我们假设我有五个屏幕的五个图像url我可以使用你的方法。您的方法声明，当用户与图像交互时，一个主屏幕将导航到第二个屏幕。是否可以让每个图像导航到不同的屏幕。表示旋转木马滑块中五个图像的五屏类。当每个图像按在旋转木马滑块上时，我制作了五屏，并将其命名为slider_pageone、slider_Page2、slider_Page3、slider_Page4和slider_Page5。仅当从旋转木马滑块主页中单击链接到此页面的特定图像时，才会触发所有这些。为什么要创建5个屏幕？只使用一个屏幕并传递不同的URL，如果您有100个图像，您是否要创建100个屏幕，当然不只是一个具有不同参数的屏幕

URL

。还有一件事，对于网络图像，我需要像本地资产图像一样在pubspec.yaml中指定其url。我计划为促销、游戏、新闻等创建不同的屏幕。当按下旋转木马图像时，它们必须链接到不同的页面上。

import 'package:flutter/material.dart';

class ImageScreen extends StatefulWidget {
  final String url;
  ImageScreen(this.url);

  @override
  _MyImageScreen createState() => _MyImageScreen(url);
}

class _MyImageScreen extends State<ImageScreen> {
  final String url;
  _MyImageScreen(this.url);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ImageScreen'),
        ),
        body: Image.network(url, width: double.infinity));
  }
}