Question

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

如何为不同的图像单击提供单独的页面。例如，我的抖动轮播滑块中有五个图像。图像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(),
       )


        ],
      ),
    );
  }
}

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

Answer 1

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

当您单击图像时，第一个将包含carousel_slider，它将导航到第二个屏幕，并传递您单击的图像的图像URL，要进行点击事件，您需要用{{1}包装图像小部件}

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

Flutter轮播图片滑块在点击事件期间打开单独的页面称为

1 个答案: