flutter：快速实现Bannber，使用三方库carousel_slider

qq_37025271

已于 2023-07-28 14:49:12 修改

阅读量889

点赞数

文章标签： flutter

于 2023-07-28 14:33:12 首次发布

本文链接：https://blog.csdn.net/qq_37025271/article/details/131978770

版权

文章展示了如何在Flutter中使用carousel_slider包来创建一个自动播放的轮播图组件。轮播图包含一组图片，当用户点击时会触发回调函数，同时提供了一个指示器来显示当前选中的图片索引。

摘要由CSDN通过智能技术生成

carousel_slider: ^4.2.1

carousel_slider | Flutter Package

直接贴代码

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

class MyBannerView extends StatefulWidget {
  final List<int> imgList; //demolist
  final void Function(int index) select;

  const MyBannerView(this.imgList, {super.key, required this.select});

  @override
  State<MyBannerView> createState() => _MyBannerViewState();
}

class _MyBannerViewState extends State<MyBannerView> {
  final CarouselController _buttonCarouselController = CarouselController();
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CarouselSlider(
          options: CarouselOptions(
              autoPlay: true,
              viewportFraction: 1.0,
              onPageChanged: (index, _) {
                setState(() {
                  _currentIndex = index;
                });
              }),
          items: widget.imgList.map((i) {
            return Builder(
              builder: (BuildContext context) {
                return GestureDetector(
                  onTap: () {
                    widget.select(_currentIndex);
                  },
                  child: Container(
                    width: MediaQuery.of(context).size.width - 40,
                    height: 350,
                    margin: const EdgeInsets.all(20),
                    decoration: ShapeDecoration(
                        image: const DecorationImage(
                            image: AssetImage("images/img/demo_banner.png")),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadiusDirectional.circular(8))),
                  ),
                );
              },
            );
          }).toList(),
          carouselController: _buttonCarouselController,
        ),
        Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: widget.imgList.map((idx) {
              return GestureDetector(
                onTap: () => _buttonCarouselController.animateToPage(idx),
                child: Container(
                  width: 5.56,
                  height: 5.56,
                  margin: const EdgeInsets.symmetric(
                      vertical: 0.0, horizontal: 4.0),
                  color: (idx-1) == _currentIndex ? Colors.blue : Colors.red,
                ),
              );
            }).toList())
      ],
    );
  }
}