Flutter轮播图片滑块在点击事件期间打开单独的页面 [英] Flutter carousel image slider open separate page during on tap event is called

问题描述

不熟悉。我想问一个关于我的代码的问题。我在此墨水池和点击功能上浏览了youtube和一些Google教程，以在flutter上打开新的课堂活动。但是，结果是，当点击图像时，它会打开不同的图像屏幕，但它们共享相同的课程文件。

Im new to flutter. I would like to ask a question about my code. I have take a look on youtube and some google tutorial on this inkwell and on tap function to open new class activity on flutter.But the result is, when the image is tapped it open different image screen but they share same class file.

如何为不同的图像单击创建单独的页面。例如，
我的抖动轮播滑块中有五个图像。
图像1将打开滑块1。图像2将打开滑块2，依此类推。意味着它们位于单独的页面上，而不是不同的图像打开同一页面，但只显示不同的图像。我正在尝试本教程，但它们确实具有相同的页面，但调用事件后显示的图像不同。 url https://www.youtube.com/watch?v=l9XOUoJsdy4

How can I have a separate page for different image click. For example, I have five image in my flutter carousel slider. Image 1 will open sliderpage 1. Image 2 will open sliderpage 2 and so on.Means they are on separate page instead of different image open same page but only show different images. Im trying this tutorial but they do have same page but different images displayed after on tap event is called. url 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(),
       )


        ],
      ),
    );
  }
}

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

On this code, this code just display carousel image without any event on click is done , I was expecting to have different page routing by on tap event is happen when image assets is clicked and navigate to different pages.

推荐答案

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

First of all, you need to install carousel_slider, then create two screens:

第一个屏幕将在您单击导航到的图像时包含carousel_slider。第二个屏幕和您单击的图像的传递图像URL，要发生点击事件，您需要使用 GestureDetector

The first one will contain carousel_slider when you click on the image it will navigate to the second screen and passing image URL of the image you clicked on, To have on tap event you need to wrap you Image widget with 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,
        ],
      ),
    );
  }
}

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

The second screen will contain only the image you clicked on:

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

这篇关于Flutter轮播图片滑块在点击事件期间打开单独的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！