如何在flutter中为image_carousel包的滑块图像编写可点击函数？ [英] How to write clickable functions for slider images of image_carousel package in flutter?

问题描述

我正在使用imagecarousel软件包来显示来自网络的图像。我想为幻灯片中的图像保留onPressed函数。

I am using imagecarousel package for displaying images from the network. I want to keep onPressed function for images in the slide.

new ImageCarousel(
  <ImageProvider>[
    new NetworkImage('http://www.hilversum.ferraridealers.com/siteasset/ferraridealer/54f07ac8c35b6/961/420/selected/0/0/0/54f07ac8c35b6.jpg'),
    new NetworkImage('http://auto.ferrari.com/en_EN/wp-content/uploads/sites/5/2017/08/ferrari-portofino-reveal-2017-featured-new.jpg'),

    new NetworkImage('http://www.hilversum.ferraridealers.com/siteasset/ferraridealer/54f07ac8c35b6/961/420/selected/0/0/0/54f07ac8c35b6.jpg'),
  ],
  interval: new Duration(seconds: 1),
)

推荐答案

对图像轮播进行了一些修改之后，我得以实现click事件（其他事件也可以）。这是示例代码。

After making some modifications to Image Carousel, I was able to implement click event (other events also possible). Here is the sample code.

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class ImageCarousel extends StatefulWidget {
  final List<ImageProvider> imageProviders;
  final double height;
  final TargetPlatform platform;
  final Duration interval;
  final TabController tabController;
  final BoxFit fit;

  // Images will shrink according to the value of [height]
  // If you prefer to use the Material or Cupertino style activity indicator set the [platform] parameter
  // Set [interval] to let the carousel loop through each photo automatically
  // Pinch to zoom will be turned on by default
  ImageCarousel(this.imageProviders,
      {this.height = 250.0, this.platform, this.interval, this.tabController, this.fit = BoxFit.cover});

  @override
  State createState() => new _ImageCarouselState();
}

TabController _tabController;

class _ImageCarouselState extends State<ImageCarousel> with SingleTickerProviderStateMixin {

  @override
  void initState() {
    super.initState();
    _tabController = widget.tabController ?? new TabController(vsync: this, length: widget.imageProviders.length);

    if (widget.interval != null) {
      new Timer.periodic(widget.interval, (_) {
        _tabController.animateTo(_tabController.index == _tabController.length - 1 ? 0 : ++_tabController.index);
      });
    }
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new SizedBox(
      height: widget.height,
      child: new TabBarView(
        controller: _tabController,
        children: widget.imageProviders.map((ImageProvider provider) {
          return new CarouselImageWidget(widget, provider, widget.fit, widget.height);
        }).toList(),
      ),
    );
  }
}

class CarouselImageWidget extends StatefulWidget {
  final ImageCarousel carousel;
  final ImageProvider imageProvider;
  final BoxFit fit;
  final double height;

  CarouselImageWidget(this.carousel, this.imageProvider, this.fit, this.height);

  @override
  State createState() => new _CarouselImageState();
}

class _CarouselImageState extends State<CarouselImageWidget> {
  bool _loading = true;

  Widget _getIndicator(TargetPlatform platform) {
    if (platform == TargetPlatform.iOS) {
      return new CupertinoActivityIndicator();
    } else {
      return new Container(
        height: 40.0,
        width: 40.0,
        child: new CircularProgressIndicator(),
      );
    }
  }

  @override
  void initState() {
    super.initState();

    widget.imageProvider.resolve(new ImageConfiguration()).addListener((i, b) {
      if (mounted) {
        setState(() {
          _loading = false;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: widget.height,
      child: _loading
          ? _getIndicator(widget.carousel.platform == null ? defaultTargetPlatform : widget.carousel.platform)
          : new GestureDetector(
        child: new Image(
          image: widget.imageProvider,
          fit: widget.fit,
        ),
        onTap: () {
          int index = int.parse(_tabController.index.toString());
          switch(index){
            //Implement you case here
            case 0:
            case 1:
            case 2:
            default:
              print(_tabController.index.toString());
          }
        },
      ),
    );
  }
}

void main(){
  runApp(new MaterialApp(
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text("Demo"),
      ),
      body: new ImageCarousel(
        <ImageProvider>[
          new NetworkImage(
              'http://wallpaper-gallery.net/images/images/images-2.jpg'),
          new NetworkImage(
              'http://wallpaper-gallery.net/images/images/images-10.jpg'),
          new NetworkImage(
              'http://wallpaper-gallery.net/images/images/images-4.jpg'),
        ],
        interval: new Duration(seconds: 5),
      )
    ),
  ));
}

希望它会有所帮助.. !!

Hope it helps..!!

这篇关于如何在flutter中为image_carousel包的滑块图像编写可点击函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！