Flutter carousel 图像滑块在点击事件期间打开单独的页面被称为

Question

我是新来的颤振。我想问一个关于我的代码的问题。我查看了 youtube 和一些关于此墨水池和点击功能的谷歌教程，以在颤振上打开新的类活动。但结果是，当点击图像时，它会打开不同的图像屏幕，但它们共享相同的类文件。

如何为不同的图像点击创建单独的页面。例如，我的 flutter carousel 滑块中有五个图像。Image 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(),
       )


        ],
      ),
    );
  }
}

在此代码中，此代码仅显示轮播图像，而没有完成任何单击事件，我希望在单击图像资产并导航到不同页面时通过点击事件发生不同的页面路由。

Answer 1

首先，您需要安装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));
  }
}