Flutter 旋转木马图像滑块在点击期间打开单独的页面

Question

我期待在点击特定图片时打开图片。我只能通过点击打开第一张图片。我无法打开其他图像我想打开已单击的图像。我怎样才能有一个单独的页面来点击不同的图片。例如，我的 flutter carousel 滑块中有五个图像。图片 1 将打开 sliderpage 1。图片 2 将打开 sliderpage 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 来传递参数

代码片段

routes: {
          '/': (context) => Demo(),
          '/first': (context) => FirstScreen(),
          '/second': (context) => SecondScreen(),
        });

...

items: [
            {
              "url": 'https://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
              "routeName": "/first"
            },  
...

Widget build(BuildContext context) {
    final Map args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
        appBar: AppBar(
          title: Text('First Screen'),
        ),
        body: Image.network(args["url"], width: double.infinity));

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        //home: Demo(),
        initialRoute: '/',
        routes: {
          '/': (context) => Demo(),
          '/first': (context) => FirstScreen(),
          '/second': (context) => SecondScreen(),
        });
  }
}

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: [
            {
              "url": 'https://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
              "routeName": "/first"
            },
            {
              "url": 'https://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
              "routeName": "/second"
            },
            {
              "url": 'https://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg',
              "routeName": "/first"
            },
            {
              "url": 'https://photo.16pic.com/00/38/88/16pic_3888084_b.jpg',
              "routeName": "/second"
            },
          ].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["url"], fit: BoxFit.fill),
                        onTap: () {
                          print('i $i');
                          Navigator.pushNamed(
                            context,
                            i["routeName"],
                            arguments: i,
                          );
                        }));
              },
            );
          }).toList(),
        ));

    return Scaffold(
      body: new Column(
        children: <Widget>[
          image_carousel,
        ],
      ),
    );
  }
}

class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> {
  @override
  Widget build(BuildContext context) {
    final Map args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
        appBar: AppBar(
          title: Text('Second Screen'),
        ),
        body: Image.network(args["url"], width: double.infinity));
  }
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    final Map args = ModalRoute.of(context).settings.arguments;
    return Scaffold(
        appBar: AppBar(
          title: Text('First Screen'),
        ),
        body: Image.network(args["url"], width: double.infinity));
  }
}

Flutter 旋转木马图像滑块在点击期间打开单独的页面

Flutter carousel image slider open separate page during on tap

flutter

flutter-layout

flutter-animation