Flutter轮播图插件smooth_carousel_slider_widget的使用

特性

使用方法

要使用 SmoothCarouselSlider 插件，只需创建一个 SmoothCarouselSlider 小部件，并传递所需的参数。

SmoothCarouselSlider(
  itemCount: 11, // 轮播项的数量
  initialSelectedIndex: 5, // 初始选中项的索引
  itemExtent: 80, // 每个轮播项的宽度
  selectedWidget: (index) => Padding(
    padding: const EdgeInsets.symmetric(horizontal: 8),
    child: Container(
      height: 40,
      color: Colors.pinkAccent,
    ),
  ), // 选中项的样式
  unSelectedWidget: (index) => Padding(
    padding: const EdgeInsets.symmetric(horizontal: 8),
    child: Container(
      height: 40,
      color: Colors.purpleAccent,
    ),
  ), // 未选中项的样式
  onSelectedItemChanged: (index) => debugPrint('$index'), // 当选中项发生变化时的回调
)

完整示例

以下是一个完整的示例，展示了如何在应用中使用 SmoothCarouselSlider 插件。该示例中，轮播项为一周中的每一天。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  Example({Key? key}) : super(key: key);
  final List<String> weekDays = [
    '星期六',
    '星期日',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五'
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SmoothCarouselSlider(
          unSelectedWidget: (index) {
            return DayCard(
              dayName: weekDays[index],
              isCenter: false,
              index: index,
            );
          },
          selectedWidget: (index) {
            return DayCard(
              dayName: weekDays[index],
              isCenter: true,
              index: index,
            );
          },
          initialSelectedIndex: weekDays.length ~/ 2, // 默认选中中间的项
          itemCount: weekDays.length, // 一周有七天
          itemExtent: 75, // 每个轮播项的宽度
          onSelectedItemChanged: (index) {
            debugPrint(weekDays[index]); // 打印当前选中的项
          },
        ),
      ),
    );
  }
}

//!=====================================================================
class DayCard extends StatelessWidget {
  final int index;
  final String dayName;
  final bool isCenter;

  const DayCard(
      {Key? key,
      required this.index,
      required this.dayName,
      required this.isCenter})
      : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            height: 90,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                gradient: isCenter
                    ? const LinearGradient(
                        colors: [Color(0xFFB6116B), Color(0xFF2E1371)])
                    : const LinearGradient(colors: [
                        Color(0xFF2E1371),
                        Color(0xFF2E1371),
                        Color(0xFF130B2B)
                      ])),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  dayName,
                  style: const TextStyle(color: Colors.white, fontSize: 13),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}