Question

这是我在Flutter中的“ coousel”滑块的代码，我想让此幻灯片可点击，该怎么做？单击“ Corousel”滑块中的图像后，我想打开特定于图像类别的屏幕。

class _CarouselExampleState extends State<CarouselExample>  {
  List imgNews = [
    "images/groceries.jpg",
    "images/image_1.png",
    "images/photographer.jpg",
    "images/electrician.jpg",
  ];
  @override
  void initState() {
    super.initState();
  }
  List<T> map<T>(List list, Function handler) {
    List<T> result = [];
    for (var i = 0; i < list.length; i++) {
      result.add(handler(i, list[i]));
    }
    return result;
  }

  int _current = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
          Stack(
            children: [
              CarouselSlider(
                options: CarouselOptions(
                  autoPlay: true,
                  height: 150,
                  viewportFraction: 1.0,
                  onPageChanged: (index, reason) {
                    setState(() {
                      _current = index;
                    });
                  },
                ),
                items: imgNews.map(
                      (url) {
                    return Container(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            ClipRRect(
                              child: Image.asset(
                                url,
                                fit: BoxFit.fill,
                                height: 150,
                                width: 300,
                              ),
                            ),
                          ],
                        )
                    );
                  },
                ).toList(),
              ),
              Padding(
                padding: EdgeInsets.only(top:150),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: map<Widget>(imgNews, (index, url) {
                    return Container(
                      width: 6.0,
                      height: 8.0,
                      margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: _current == index ? Colors.red : Colors.blueGrey,
                      ),
                    );
                  }),
                ),
              ),
            ],
          )
        ]
    );
  }
}

我尝试了很多方法，但是我无法使此corousel_slider可点击，请任何人帮助，当单击图像时，我想打开特定于图像类别的屏幕。

Answer 1

您可以使用Material中包裹的InkWell小部件-

child: Material(
        color: Colors.yellow,
        child: InkWell(
          onTap: () {
            // Do something.
          },
        ),
      ),

根据您的具体情况-

...
items: imgNews.map(
  (url) {
    return Container(
      child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        ClipRRect(
          child: Material(
            color: Colors.yellow,
            child: InkWell(
              onTap: () {
                // Do something.
              },
              child: Image.asset(
                URL,
                fit: BoxFit.fill,
                height: 150,
                width: 300,
              ),
            ),
          ),
        ),
      ],
    ),
  );
 },
).toList(),
...

Answer 2

这是您的操作方式

首先使轮播图片可点击

以您的情况为例：用GestureDetector包装

                    ClipRRect(
                              child: Image.asset(
                                url,
                                fit: BoxFit.fill,
                                height: 150,
                                width: 300,
                              ),
                            ),

第二次点击图像，获取图像索引并将其传递给函数

                    onTap: () {
                                imgList.indexOf(url);
                                indexMethod(imgList.indexOf(url).toString());                             
                              },

最后创建一个方法

  indexMethod(String index) {
      switch (index) {
        case '0': 
          {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => HelpPage()),
            );
          }
          break;
        case '1':
          {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => UpdatesPage()),
            );
          }
          break;
        case '2':
          {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => UserProfile()),
            );
          }
          break;
      }
    }

我刚刚将此功能添加到了CarouselSlider：D

如何使该皮质滑动器在颤动中可点击

2 个答案: