我是 Flutter 新手。我想问一个关于我的代码的问题。我查看了 youtube 和一些关于这个墨水池的谷歌教程，以及在 flutter 上打开新类(class)事件的点击功能。但结果是，当点击图像时，它会打开不同的图像屏幕，但它们共享相同的类文件。

如何为不同的图片点击创建单独的页面。例如， 我的 flutter carousel slider 中有五个图像。 图片 1 将打开 sliderpage 1。Image 2 将打开 sliderpage 2 等等。意味着它们在不同的页面上而不是不同的图像打开同一页面但只显示不同的图像。我正在尝试本教程，但它们确实有相同的页面，但在调用点击事件后显示的图像不同。网址 https://www.youtube.com/watch?v=l9XOUoJsdy4

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
   Widget image_carousel = new Container(
      height: 345.0,

      child: new Carousel(
        boxFit: BoxFit.fill,
        images: [
          AssetImage('assets/s7.jpg'),
          AssetImage('assets/s3.jpg'),
          AssetImage('assets/s5.jpg'),
          AssetImage('assets/s2.jpg'),
          AssetImage('assets/s4.jpg'),
        ],
        autoplay: true,
        animationCurve: Curves.fastOutSlowIn,
        animationDuration: Duration(milliseconds: 500),
        dotColor: Colors.red[50],
        dotSize: 4.0,
        indicatorBgPadding: 2.0,
      ),


    );

    return Scaffold(

      body: new Column(
        children: <Widget>[
          image_carousel,

       //grid view
       Container(
         height:163.0,
         child: Products(),
       )


        ],
      ),
    );
  }
}

在这段代码中，这段代码只显示旋转木马图像，没有任何点击事件完成，我期望在点击图像 Assets 并导航到不同页面时通过点击事件发生不同的页面路由。

最佳答案

首先，你需要安装carousel_slider ，然后创建两个屏幕:

第一个将包含 carousel_slider 当你点击图像时它会导航到第二个屏幕并传递你点击的图像的图像 URL，要有点击事件你需要用 GestureDetector 包装你的图像小部件

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

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

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

关于dart - Flutter 旋转木马图像 slider 在点击事件期间打开单独的页面被调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55413525/