Question

我需要为项目列表（例如学生）实现轮播视图。我希望能够在每个轮播中显示个人资料图像，名称和等级（3个项目）。到目前为止，我只发现了像这样的图片的轮播：https://pub.dev/packages/carousel_pro#-readme-tab-

是否有任何软件包可以让我为每张幻灯片放置多个小部件（例如，图像，文本，文本）？

Answer 1

您试用Carousel Slider软件包（https://pub.dev/packages/carousel_slider）。我在需要创建小部件轮播的项目中使用了此代码。

Answer 2

我编写了一个带有点导航和箭头控件的自定义小部件。也许有用。

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

class CustomImageSlider extends StatefulWidget {
  List<Widget> images;

  CustomImageSlider({@required this.images});

  @override
  _CustomImageSliderState createState() => _CustomImageSliderState();
}

class _CustomImageSliderState extends State<CustomImageSlider> {

  CarouselController buttonCarouselController;
  int _currentImage = 0;

  @override
  void initState() {
    buttonCarouselController = CarouselController();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
      double height = MediaQuery.of(context).size.height/3;

      List<Widget> dotNavigation = [];
      for (var image in widget.images){
        int index=widget.images.indexOf(image);
        dotNavigation.add(
            GestureDetector(
              child: Container(
                width:  _currentImage == index ? 12.0 : 8.0,
                height:  _currentImage == index ? 12.0 : 8.0,
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: _currentImage == index
                        ? Theme.of(context).primaryColor
                        : Color.fromRGBO(0, 0, 0, 0.4)),
              ),
              onTap: () {
                buttonCarouselController.jumpToPage(index);
              },
            )
        );
      }
      return Container(
        child: Column(
            children: [
              Stack(
                children: [
                  Container(
                    padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 30.0),
                    child: CarouselSlider(
                      carouselController: buttonCarouselController,
                      items: widget.images,
                      options: CarouselOptions(
                          height: height,
                          //aspectRatio: 16/9,
                          viewportFraction: 1,
                          initialPage: 0,
                          enableInfiniteScroll: true,
                          reverse: false,
//                       autoPlay: true,
//                       autoPlayInterval: Duration(seconds: 3),
//                       autoPlayAnimationDuration: Duration(milliseconds: 800),
//                       autoPlayCurve: Curves.fastOutSlowIn,
                          scrollDirection: Axis.horizontal,
                          onPageChanged: (currentIndex, reason) {
                            setState(() {
                              _currentImage = currentIndex;
                            });
                          }
                      ),
                    ),
                  ),
                  Positioned(
                    top: height/2,
                    right: -18,
                    child: IconButton(
                      onPressed: () => buttonCarouselController.nextPage(
                          duration: Duration(milliseconds: 300), curve: Curves.linear),
                      icon: Icon(Icons.keyboard_arrow_right),
                      iconSize: 50.0,
                      color: Theme.of(context).primaryColor,
                    ),
                  ),
                  Positioned(
                    top: height/2,
                    left: -18,
                    child: IconButton(
                      onPressed: () => buttonCarouselController.previousPage(
                          duration: Duration(milliseconds: 300), curve: Curves.linear),
                      icon: Icon(Icons.chevron_left),
                      iconSize: 50.0,
                      color: Theme.of(context).primaryColor,
                    ),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: dotNavigation,
              ),
            ]
        ),
      );
  }
}

颤动小部件轮播，而不仅仅是图像轮播？

2 个答案: