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

PageViewIndicator #

构建PageView的指示标记。

导入 #

import 'package:page_view_indicator/page_view_indicator.dart';

使用 #

默认Material行为 #

return PageViewIndicator(
  pageIndexNotifier: pageIndexNotifier, // 用于监听当前页面索引的通知器
  length: length, // 页面总数
  normalBuilder: (animationController, index) => Circle(
        size: 8.0, // 普通状态下的圆圈大小
        color: Colors.black87, // 普通状态下的颜色
      ),
  highlightedBuilder: (animationController, index) => ScaleTransition(
        scale: CurvedAnimation(
          parent: animationController, // 动画控制器
          curve: Curves.ease, // 动画曲线
        ),
        child: Circle(
          size: 12.0, // 高亮状态下的圆圈大小
          color: Colors.black45, // 高亮状态下的颜色
        ),
      ),
);

效果展示：

自定义动画 #

return PageViewIndicator(
  pageIndexNotifier: pageIndexNotifier,
  length: length,
  normalBuilder: (animationController, index) => Circle(
        size: 8.0,
        color: Colors.black87,
      ),
  highlightedBuilder: (animationController, index) => ScaleTransition(
        scale: CurvedAnimation(
          parent: animationController,
          curve: Curves.ease,
        ),
        child: Circle(
          size: 8.0,
          color: Colors.white,
        ),
      ),
);

效果展示：

自定义图标 #

不仅仅是点！

return PageViewIndicator(
  pageIndexNotifier: pageIndexNotifier,
  length: length,
  normalBuilder: (animationController, index) => ScaleTransition(
        scale: CurvedAnimation(
          parent: animationController,
          curve: Curves.ease,
        ),
        child: Icon(
          Icons.favorite, // 普通状态下的图标
          color: Colors.black87,
        ),
      ),
  highlightedBuilder: (animationController, index) => ScaleTransition(
        scale: CurvedAnimation(
          parent: animationController,
          curve: Curves.ease,
        ),
        child: Icon(
          Icons.star, // 高亮状态下的图标
          color: Colors.white,
        ),
      ),
);

效果展示：

修改指示器之间的间距 #

可以通过indicatorPadding属性更改指示器周围的间距：

return PageViewIndicator(
  pageIndexNotifier: pageIndexNotifier,
  length: length,
  indicatorPadding: const EdgeInsets.all(4.0), // 设置间距为4.0
  ...
);

默认值为const EdgeInsets.all(8.0)。

完整示例代码

以下是一个完整的示例代码，展示了如何使用page_view_indicator插件：

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

class App extends StatelessWidget {
  static const length = 3; // 页面总数
  final pageIndexNotifier = ValueNotifier<int>(0); // 用于通知当前页面索引

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          alignment: FractionalOffset.bottomCenter,
          children: <Widget>[
            // 构建PageView
            PageView.builder(
              onPageChanged: (index) => pageIndexNotifier.value = index, // 更新当前页面索引
              itemCount: length,
              itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(color: Colors.accents[index]), // 设置背景颜色
                );
              },
            ),
            // 示例1：默认样式
            _buildExample1(),
            // 示例2：自定义动画
            _buildExample2(),
            // 示例3：自定义图标
            _buildExample3(),
          ],
        ),
      ),
    );
  }

  // 示例1：默认样式
  PageViewIndicator _buildExample1() {
    return PageViewIndicator(
      pageIndexNotifier: pageIndexNotifier,
      length: length,
      normalBuilder: (animationController, index) => Circle(
            size: 8.0,
            color: Colors.black87,
          ),
      highlightedBuilder: (animationController, index) => ScaleTransition(
            scale: CurvedAnimation(
              parent: animationController,
              curve: Curves.ease,
            ),
            child: Circle(
              size: 12.0,
              color: Colors.accents.elementAt((index + 3) * 3),
            ),
          ),
    );
  }

  // 示例2：自定义动画
  PageViewIndicator _buildExample2() {
    return PageViewIndicator(
      pageIndexNotifier: pageIndexNotifier,
      length: length,
      normalBuilder: (animationController, index) => Circle(
            size: 8.0,
            color: Colors.black87,
          ),
      highlightedBuilder: (animationController, index) => ScaleTransition(
            scale: CurvedAnimation(
              parent: animationController,
              curve: Curves.ease,
            ),
            child: Circle(
              size: 8.0,
              color: Colors.white,
            ),
          ),
    );
  }

  // 示例3：自定义图标
  PageViewIndicator _buildExample3() {
    return PageViewIndicator(
      pageIndexNotifier: pageIndexNotifier,
      length: length,
      normalBuilder: (animationController, index) => ScaleTransition(
            scale: CurvedAnimation(
              parent: animationController,
              curve: Curves.ease,
            ),
            child: Icon(Icons.favorite, color: Colors.black87),
          ),
      highlightedBuilder: (animationController, index) => ScaleTransition(
            scale: CurvedAnimation(
              parent: animationController,
              curve: Curves.ease,
            ),
            child: Icon(Icons.star, color: Colors.white),
          ),
    );
  }
}

void main() => runApp(App());