Flutter页面指示器插件ios_smooth_page_indicator的使用

IosSmoothPageIndicator 是一个高度可定制且易于使用的页面指示器小部件，旨在在Flutter应用中复现iOS应用中常见的平滑且时尚的页面指示器。该插件提供了现代且灵活的解决方案来管理Flutter应用中的页面指示器。

特性

• 可定制的外观：可以轻松修改点的颜色、活动点颜色、点大小、间距和背景颜色以适应您的应用设计。
• 支持触觉反馈：可以选择启用用户与点交互时的触觉反馈，从而提供更具触感的用户体验。
• 平滑动画：该小部件在页面之间过渡时提供了平滑的动画效果，增强了整体用户体验。
• 与PageController集成：可以无缝地与Flutter的PageController集成，以便在用户滚动时更新页面指示器。
• 点点击支持：用户可以点击任何点直接导航到相应的页面。
• 轻量且高效：设计为轻量级，确保对应用性能影响最小。

使用方法

IosSmoothPageIndicator(
  currentIndex: _currentIndex,
  totalDots: _totalDots,
  dotColor: Colors.grey,
  activeDotColor: Colors.blue,
  dotBackgroundColor: Colors.grey.withOpacity(0.1),
  dotWidth: 8.0,
  dotHeight: 8.0,
  dotSpacing: 12.0,
  onDotTapped: (index) {
    // 处理点点击
    _pageController.jumpToPage(index);
  },
  pageController: _pageController,
  enableHapticFeedback: true,
)

自定义选项

• currentIndex: 当前激活页的索引。
• totalDots: 显示的总点数（即总页数）。
• dotColor: 不活跃点的颜色。
• activeDotColor: 活跃点的颜色。
• dotBackgroundColor: 点周围的背景颜色（默认为半透明灰色）。
• dotWidth 和 dotHeight: 点的尺寸。
• dotSpacing: 每个点之间的间距。
• onDotTapped: 点击点时的回调函数，提供被点击的索引。
• onPageChanged: 可选的页面变化回调函数，提供新的页面索引。
• pageController: 控制关联页面视图的PageController。
• enableHapticFeedback: 选择启用或禁用点点击时的触觉反馈。

安装

在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  ios_smooth_page_indicator: ^1.1.4

然后运行 flutter pub get 来安装包。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Dashboard(),
    );
  }
}

class Dashboard extends StatefulWidget {
  const Dashboard({super.key});

  [@override](/user/override)
  State<Dashboard> createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  late int dotsIndex = 0;

  final carouselController = CarouselSliderController();

  void onImageSlide(int index) {
    setState(() {
      dotsIndex = index;
      carouselController.jumpToPage(index);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final sliderItems = [
      Image.asset('assets/images/image_1.jpg'),
      Image.asset('assets/images/image_2.jpg'),
      Image.asset('assets/images/image_3.jpg'),
      Image.asset('assets/images/image_4.jpg'),
      Image.asset('assets/images/image_5.jpg'),
    ];
    return Scaffold(
      appBar: AppBar(
        title: const Text('IosSmoothPageIndicator'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining(
            child: Column(
              children: [
                const SizedBox(
                  height: 20,
                ),
                CarouselSlider(
                  items: sliderItems,
                  carouselController: carouselController,
                  options: CarouselOptions(
                    onPageChanged: (index, reason) {
                      onImageSlide(index);
                    },
                    enlargeFactor: 0.35,
                    enableInfiniteScroll: false,
                    viewportFraction: 0.5,
                    enlargeCenterPage: true,
                    enlargeStrategy: CenterPageEnlargeStrategy.zoom,
                  ),
                ),
                const SizedBox(
                  height: 40,
                ),
                AbsorbPointer(
                  absorbing: false,
                  child: IosSmoothPageIndicator(
                    dotIndex: dotsIndex,
                    dotsCount: sliderItems.length,
                    dotBackgroundColor: Colors.grey.withOpacity(0.2),
                    onPageChanged: onImageSlide,
                    onDotTapped: (_) {},
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}