Flutter页面视图指示器插件page_view_indicators的使用

page_view_indicators 是一个用于在Flutter应用中为 PageView 提供自定义指示器的插件。该插件支持多种类型的指示器，如圆形指示器、箭头指示器、线性进度指示器和步骤指示器等。本文将详细介绍如何使用这些指示器，并提供完整的示例代码。

安装插件

首先，在你的 pubspec.yaml 文件中添加 page_view_indicators 依赖：

dependencies:
  flutter:
    sdk: flutter
  page_view_indicators: ^2.0.0 # 确保版本号是最新的

然后运行 flutter pub get 来安装插件。

示例项目结构

为了演示不同类型的指示器，我们将创建一个简单的示例项目，包含多个页面，每个页面展示一种指示器类型。

主页面 (HomePage)

主页面包含导航按钮，点击不同的按钮可以跳转到对应的指示器示例页面。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PageViewIndicators Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        '/': (context) => HomePage(),
        '/circle_page_indicator_demo': (context) => CirclePageIndicatorDemo(),
        '/arrow_page_indicator_demo': (context) => ArrowPageIndicatorDemo(),
        '/linear_progress_page_indicator_demo': (context) => LinearProgressPageIndicatorDemo(),
        '/step_page_indicator_demo': (context) => StepPageIndicatorDemo(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  final _navItems = [
    NavItem('CirclePageIndicator Demo', '/circle_page_indicator_demo'),
    NavItem('ArrowPageIndicator Demo', '/arrow_page_indicator_demo'),
    NavItem('LinearProgressPageIndicator Demo', '/linear_progress_page_indicator_demo'),
    NavItem('StepPageIndicator Demo', '/step_page_indicator_demo'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageViewIndicators Demo'),
      ),
      body: _getNavButtons(context),
    );
  }

  _getNavButtons(BuildContext context) {
    return ListView(
      children: _navItems.map((item) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(padding: EdgeInsets.all(8.0), primary: Colors.green),
          onPressed: () {
            Navigator.pushNamed(context, item.routeName);
          },
          child: Text(
            item.title,
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white, fontSize: 16.0),
          ),
        ),
      )).toList(),
    );
  }
}

class NavItem {
  final String title;
  final String routeName;

  NavItem(this.title, this.routeName);
}

圆形指示器 (CirclePageIndicator)

圆形指示器是页面视图中最常见的指示器类型。以下是 CirclePageIndicator 的示例代码：

import 'package:flutter/material.dart';
import 'package:page_view_indicators/circle_page_indicator.dart';

class CirclePageIndicatorDemo extends StatefulWidget {
  @override
  _CirclePageIndicatorDemoState createState() => _CirclePageIndicatorDemoState();
}

class _CirclePageIndicatorDemoState extends State<CirclePageIndicatorDemo> {
  final _items = [Colors.blue, Colors.orange, Colors.green, Colors.pink, Colors.red];
  final _pageController = PageController();
  final _currentPageNotifier = ValueNotifier<int>(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CirclePageIndicator Demo'),
      ),
      body: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              _buildPageView(),
              _buildCircleIndicator(),
            ],
          ),
        ],
      ),
    );
  }

  _buildPageView() {
    return Container(
      color: Colors.black87,
      height: 200.0,
      child: PageView.builder(
        itemCount: _items.length,
        controller: _pageController,
        itemBuilder: (BuildContext context, int index) {
          return Center(
            child: FlutterLogo(
              colors: _items[index],
              size: 50.0,
            ),
          );
        },
        onPageChanged: (int index) {
          _currentPageNotifier.value = index;
        },
      ),
    );
  }

  _buildCircleIndicator() {
    return Positioned(
      left: 0.0,
      right: 0.0,
      bottom: 0.0,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: CirclePageIndicator(
          itemCount: _items.length,
          currentPageNotifier: _currentPageNotifier,
        ),
      ),
    );
  }
}

箭头指示器 (ArrowPageIndicator)

箭头指示器允许用户通过点击左右箭头来切换页面。以下是 ArrowPageIndicator 的示例代码：

import 'package:flutter/material.dart';
import 'package:page_view_indicators/arrow_page_indicator.dart';

class ArrowPageIndicatorDemo extends StatefulWidget {
  @override
  _ArrowPageIndicatorDemoState createState() => _ArrowPageIndicatorDemoState();
}

class _ArrowPageIndicatorDemoState extends State<ArrowPageIndicatorDemo> {
  final _items = [Colors.blue, Colors.orange, Colors.green, Colors.pink];
  final _pageController = PageController();
  final _currentPageNotifier = ValueNotifier<int>(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ArrowPageIndicator Demo'),
      ),
      body: ArrowPageIndicator(
        isJump: true,
        pageController: _pageController,
        currentPageNotifier: _currentPageNotifier,
        itemCount: _items.length,
        child: _buildPageView(_pageController, _currentPageNotifier),
      ),
    );
  }

  _buildPageView(PageController pageController, ValueNotifier currentPageNotifier) => Container(
    color: Colors.black,
    height: 200.0,
    child: PageView.builder(
      itemCount: _items.length,
      controller: pageController,
      itemBuilder: (BuildContext context, int index) {
        return Center(
          child: FlutterLogo(
            colors: _items[index],
            size: 75.0,
          ),
        );
      },
      onPageChanged: (int index) {
        currentPageNotifier.value = index;
      },
    ),
  );
}

线性进度指示器 (LinearProgressPageIndicator)

线性进度指示器显示当前页面相对于总页面数的进度。以下是 LinearProgressPageIndicator 的示例代码：

import 'package:flutter/material.dart';
import 'package:page_view_indicators/linear_progress_page_indicator.dart';

class LinearProgressPageIndicatorDemo extends StatefulWidget {
  @override
  _LinearProgressPageIndicatorDemoState createState() => _LinearProgressPageIndicatorDemoState();
}

class _LinearProgressPageIndicatorDemoState extends State<LinearProgressPageIndicatorDemo> {
  final _items = [Colors.blue, Colors.orange, Colors.green, Colors.pink, Colors.red];
  final _pageController = PageController();
  final _currentPageNotifier = ValueNotifier<int>(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LinearProgressPageIndicator Demo'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          _buildPageView(),
          _buildLinearProgressIndicator(),
        ],
      ),
    );
  }

  _buildPageView() {
    return Container(
      color: Colors.black87,
      height: 200.0,
      child: PageView.builder(
        itemCount: _items.length,
        controller: _pageController,
        itemBuilder: (BuildContext context, int index) {
          return Center(
            child: FlutterLogo(
              colors: _items[index],
              size: 50.0,
            ),
          );
        },
        onPageChanged: (int index) {
          _currentPageNotifier.value = index;
        },
      ),
    );
  }

  _buildLinearProgressIndicator() {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) => LinearProgressPageIndicator(
        itemCount: _items.length,
        currentPageNotifier: _currentPageNotifier,
        progressColor: Colors.green,
        width: constraints.maxWidth,
        height: 30,
      ),
    );
  }
}

步骤指示器 (StepPageIndicator)

步骤指示器用于多步骤流程中，指示当前步骤的位置。以下是 StepPageIndicator 的示例代码：

import 'package:flutter/material.dart';
import 'package:page_view_indicators/step_page_indicator.dart';

class StepPageIndicatorDemo extends StatefulWidget {
  @override
  _StepPageIndicatorDemoState createState() => _StepPageIndicatorDemoState();
}

class _StepPageIndicatorDemoState extends State<StepPageIndicatorDemo> {
  final _pageController = PageController();
  final _currentPageNotifier = ValueNotifier<int>(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StepPageIndicator Demo'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          _buildStepIndicator(),
          _buildPageView(),
        ],
      ),
    );
  }

  _buildPageView() {
    return Expanded(
      child: PageView.builder(
        itemCount: 8,
        controller: _pageController,
        itemBuilder: (BuildContext context, int index) {
          return Center(
            child: Text(
              'Step ${index + 1}',
              style: Theme.of(context).textTheme.display1,
            ),
          );
        },
        onPageChanged: (int index) {
          _currentPageNotifier.value = index;
        },
      ),
    );
  }

  _buildStepIndicator() {
    return Container(
      color: Colors.black,
      padding: const EdgeInsets.all(16.0),
      child: StepPageIndicator(
        itemCount: 8,
        currentPageNotifier: _currentPageNotifier,
        size: 16,
        onPageSelected: (int index) {
          if (_currentPageNotifier.value > index) {
            _pageController.jumpToPage(index);
          }
        },
      ),
    );
  }
}

总结

通过上述示例，你可以看到如何使用 page_view_indicators 插件为 PageView 添加各种类型的指示器。你可以根据需要选择合适的指示器类型，并对其进行定制以满足你的设计需求。希望这些示例对你有所帮助！