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

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

PageViewIndicator

构建PageView的指示标记。

零安全

这是对https://pub.dev/packages/page_view_indicator的分叉。唯一的变化是此包使用了零安全。

导入

import 'package:page_view_indicator_ns/page_view_indicator_ns.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,
        ),
      ),
);

示例 1

自定义动画

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,
        ),
      ),
);

示例 2

自定义图标

不仅仅是点！

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,
        ),
      ),
);

示例 3

更改指示器之间的空间

你可以通过indicatorPadding属性更改指示器周围的填充：

return PageViewIndicator(
  pageIndexNotifier: pageIndexNotifier,
  length: length,
  indicatorPadding: const EdgeInsets.all(4.0)
  ...

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

完整示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用page_view_indicator_ns插件。

import 'package:flutter/material.dart';
import 'package:page_view_indicator_ns/page_view_indicator_ns.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.builder(
              onPageChanged: (index) => pageIndexNotifier.value = index,
              itemCount: length,
              itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(color: Colors.accents[index]),
                );
              },
            ),
            _buildExample1()
          ],
        ),
      ),
    );
  }

  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),
        ),
      ),
    );
  }
}

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

更多关于Flutter页面指示器插件page_view_indicator_ns的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter页面指示器插件page_view_indicator_ns的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个使用 page_view_indicator_ns 插件的 Flutter 代码示例。page_view_indicator_ns 是一个流行的 Flutter 插件，用于在 PageView 下方显示指示器（如圆点）。

首先，确保在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  page_view_indicator_ns: ^0.0.5  # 请注意版本号，这里是一个示例版本，请检查最新版本

然后运行 flutter pub get 以获取依赖项。

接下来是完整的 Flutter 示例代码，展示如何使用 page_view_indicator_ns 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PageView Indicator Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageViewIndicatorExample(),
    );
  }
}

class PageViewIndicatorExample extends StatefulWidget {
  @override
  _PageViewIndicatorExampleState createState() => _PageViewIndicatorExampleState();
}

class _PageViewIndicatorExampleState extends State<PageViewIndicatorExample> with SingleTickerProviderStateMixin {
  late PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView Indicator Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: _pageController,
              children: [
                Center(child: Text('Page 1')),
                Center(child: Text('Page 2')),
                Center(child: Text('Page 3')),
              ],
            ),
          ),
          DotsIndicator(
            length: 3,  // 页面总数
            currentPage: _pageController.page.round(),  // 当前页面索引
            decorator: DotsDecorator(
              activeColor: Colors.blue,
              dotSize: 10.0,
              spacing: 5.0,
              activeSize: 15.0,
              activeShape: IndicatorShape.circle,
            ),
            onPageSelected: (int page) => _pageController.jumpToPage(page),
          ),
        ],
      ),
    );
  }
}

解释

  1. 依赖项：在 pubspec.yaml 中添加 page_view_indicator_ns 依赖项。
  2. PageView：使用 PageView 组件创建了一个包含三个页面的视图。
  3. DotsIndicator：使用 DotsIndicator 组件在 PageView 下方显示指示器。
    • length：指示器的总长度（即页面总数）。
    • currentPage：当前显示的页面索引，使用 _pageController.page.round() 获取。
    • decorator：自定义指示器的样式，包括颜色、大小和形状。
    • onPageSelected：当用户点击指示器时，跳转到相应的页面。

这个示例展示了如何使用 page_view_indicator_ns 插件在 PageView 下方显示圆点指示器，并处理页面切换。请根据需要调整代码中的样式和逻辑。

回到顶部