Question

我正在使用图像轮播包来显示带有滑动选项的容器内的网络图像..但是点击图像导航不起作用..使用墨水瓶，手势我们能够给容器而不是特定的图像... < / p>

是否有任何替代方法可以在容器内显示带有滑动选项的网络图像，如图像轮播

代码：

return new Column(children: <Widget>[                                   
                                  new SizedBox(                                     
                                       height: 200.0,
                                        width: 350.0,
                                        child: new ImageCarousel(
                                          t1,
                                       interval: new Duration(seconds: 5),
                                          allowZoom: false,
                                        ),
                                    ),
                                  ],
                                );

Answer 1

正如我的回答here所述。您可以使用以下代码。

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

Answer 2

您尝试此示例

 Card(
            elevation: 4.0,
            child: Container(
              color: Colors.white,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    // photo and title
                    SizedBox(
                      height: 250.0,
                      width: double.infinity,
                      child: Stack(
                        alignment: Alignment.center,
                        children: <Widget>[
                          new Container(
                            child: new Carousel(
                              images: [


                                new NetworkImage("your Imgpath",),

                                new AssetImage(
                                  'assets/brake.png',
                                  // package: destination.assetPackage,
                                ),
                                new AssetImage(
                                  'assets/chris.jpeg',
                                  // package: destination.assetPackage,
                                ),
                                new AssetImage(
                                  'assets/clutch.png',
                                  // package: destination.assetPackage,
                                ),
                                new AssetImage(
                                  'assets/electrical.png',
                                  // package: destination.assetPackage,
                                ),
                                new AssetImage(
                                  'assets/engine.png',
                                  // package: destination.assetPackage,
                                ),
                              ],
                              boxFit: BoxFit.scaleDown,
                              showIndicator: true,
                              dotBgColor: Colors.transparent,
                              dotColor: Colors.grey,
                              dotSize: 5.0,
                              autoplay: false,
                            ),


                          )
                        ],
                      ),
                    ),
                  ]),
            ),
          ),

如何添加图像滑块导航点击特定图像..图像轮播包不起作用

2 个答案: