选择图像时使用 Flutter Carousel Slider 路由到特定页面

Question

我正在尝试为映射的每个项目添加“onTap”或类似的内容以导航到指定的路线 (routeName)。我一直收到错误，因为我是 flutter 的新手，我不知道这段代码应该放在哪里。另外，有没有更好的方法来组织我的代码？

这是我的 Flutter Carousel Slider 的代码


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

final List<Map> robot = [
  {
    "name": "Image1",
    "image": 'assets/images/image1.png',
    "routeName": "/image1Dashboard"
  },
  {
    "name": "Image2",
    "image": 'assets/images/image2.png',
    "routeName": "/image2Dashboard"
  },
  {
    "name": "Simulation",
    "image": 'assets/images/sim.png',
    "routeName": "/simDashboard"
  },
];

final List<Widget> imageSliders = robot
    .map((item) => new Container(
          child: Container(
            margin: EdgeInsets.all(5.0),
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(5.0)),
                child: Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    Image.asset(item["image"], fit: BoxFit.cover, width: 700.0),
                    Positioned(
                      bottom: 0.0,
                      // left: 0.0,
                      // right: 0.0,
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                              Color.fromARGB(0, 0, 0, 0),
                              Color.fromARGB(0, 0, 0, 0)
                            ],
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter,
                          ),
                        ),
                        padding: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: 10.0),
                        child: Text(
                          '${item["name"]}',
                          // '${nameList[imgList.indexOf(item)]}',
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                )),
          ),
        ))
    .toList();

class MyCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Select Robot')),
      body: Container(
          // margin: EdgeInsets.symmetric(horizontal: 5),
          alignment: Alignment.center,
          child: CarouselSlider(
            options: CarouselOptions(
              height: 400,
              // aspectRatio: 2,
              enlargeCenterPage: true,
              enableInfiniteScroll: false,
              viewportFraction: .5,
              initialPage: 0,
              autoPlay: true,
              autoPlayInterval: Duration(seconds: 4),
              autoPlayCurve: Curves.fastOutSlowIn,
              enlargeStrategy: CenterPageEnlargeStrategy.scale,
            ),
            items: imageSliders,
          )),
    );
  }
}

Answer 1

用GesturDetector 包裹imageSliders 列表中的外部容器并添加一个Navigator。那应该可以。

final List<Widget> imageSliders = robot
    .map((item) => new Container(
          child:GestureDetector(
child: Container(
            margin: EdgeInsets.all(5.0),
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(5.0)),
                child: Stack(
                  alignment: Alignment.center,
                  children: <Widget>[
                    Image.asset(item["image"], fit: BoxFit.cover, width: 700.0),
                    Positioned(
                      bottom: 0.0,
                      // left: 0.0,
                      // right: 0.0,
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                              Color.fromARGB(0, 0, 0, 0),
                              Color.fromARGB(0, 0, 0, 0)
                            ],
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter,
                          ),
                        ),
                        padding: EdgeInsets.symmetric(
                            vertical: 10.0, horizontal: 10.0),
                        child: Text(
                          '${item["name"]}',
                          // '${nameList[imgList.indexOf(item)]}',
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                )),
          ),
        )),
onTap:(){} // Your function to route.
    .toList();

```

Answer 2

在路由到其他页面时将值作为参数传递。这是一个例子。

CarouselSlider(
                  options: CarouselOptions(
                    height: 150,
                    enableInfiniteScroll: false
                  ),
                  items: robot.map((item) => Container(
                    child: GestureDetector(
                      onTap: () => Navigator.push(
                          context,
                        MaterialPageRoute(
                          builder: (context) => YourPageName(title: item))),
                      child: Container(
                        margin: EdgeInsets.all(15),
                        width: double.infinity,
                          child: Text(item.toString())
                      ),
                    ),
                    color: Colors.amber,
                    margin: EdgeInsets.only(left: 10, top: 5, bottom: 5, right: 10),
                  )).toList(),
                ),

选择图像时使用 Flutter Carousel Slider 路由到特定页面

Route to specific page using Flutter Carousel Slider when image is selected

dictionary

routes

slider

carousel

flutter