如何为flutter中图像_Carousel软件包的滑块图像编写可单击的功能

Question

我正在使用ImageCarousel软件包来显示网络的图像。我想在幻灯片中保留图像的压制功能。

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),
)

Answer 1

进行一些修改以形象映像旋转木马后，我能够实现点击事件(其他事件也是可能的(。这是示例代码。

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

希望它有帮助.. !!