Flutter传送带图像滑块在点击时打开单独的页面

Question

我期待在单击特定图像时打开图像。我只要点击一下就可以打开第一个图像。我无法打开其他想要打开的图像。如何为不同的图像单击创建单独的页面。例如，我的抖动轮播滑块中有五个图像。图1将打开滑块1。图2将打开滑块2，依此类推，以此类推]

    import 'package:flutter/material.dart';
    import 'package:carousel_slider/carousel_slider.dart';
    import './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,
            ],
          ),
        );
      }
    }

    Next page called screen.dart

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

我期待在单击特定图像时打开图像。我只要点击一下就可以打开第一个图像。我无法打开其他想要打开的图像。我该如何...

Answer 1

您可以在下面复制粘贴运行完整代码您可以使用route和Navigator.pushNamed传递参数