时间戳

首页 > 解决方案 > 在点击事件期间颤动轮播图像滑块打开单独的页面被调用

dart - 在点击事件期间颤动轮播图像滑块打开单独的页面被调用

问题描述

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

我怎样才能有一个单独的页面用于不同的图像点击。例如，我的颤动轮播滑块中有五个图像。图片 1 将打开滑块页面 1。图片 2 将打开滑块页面 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(),
       )


        ],
      ),
    );
  }
}

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

标签： dartflutter

解决方案

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

推荐阅读