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

发布于 1周前 作者 h691938207 来自 Flutter

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

插件介绍

pageview_widget_indicator 是一个与 PageView 同步的插件，用于在页面上显示漂亮的指示器。它可以帮助用户更好地导航和理解当前页面的位置。

示例代码

下面是一个完整的示例代码，展示了如何使用 pageview_widget_indicator 插件来创建一个带有指示器的 PageView 页面。

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

class PageViewIndicatorExample extends StatefulWidget {
  [@override](/user/override)
  _PageViewIndicatorExampleState createState() => _PageViewIndicatorExampleState();
}

class _PageViewIndicatorExampleState extends State<PageViewIndicatorExample> {
  final PageController controller = PageController(initialPage: 0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView Indicator Example'),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          child: PageViewIndicator(
            pageController: controller,
            itemWidth: 50.0,
            itemCount: 1,
            builder: (context, index, isSelected) {
              return Padding(
                padding: const EdgeInsets.symmetric(vertical: 4.0),
                child: Material(
                  color: Colors.white.withOpacity(isSelected ? 0.25 : 0.0),
                  borderRadius: BorderRadius.circular(12.0),
                  clipBehavior: Clip.antiAlias,
                  child: InkWell(
                    onTap: () {
                      controller.jumpToPage(index);
                    },
                    child: Center(
                      child: Text(
                        '${index + 1}',
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
      body: PageView.builder(
        controller: controller,
        itemCount: 1,
        itemBuilder: (context, index) {
          return Container(
            color: Colors.red[(index + 1) % * 10],
            child: Center(
              child: Text(
                'shade ' + ((index + 1) % * 0).toString(),
                style: CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle,
              ),
            ),
          );
        },
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter中使用pageview_widget_indicator插件来创建页面指示器的示例代码。这个插件可以帮助你在使用PageView时添加一个底部指示器，比如小圆点。

首先，确保你已经在pubspec.yaml文件中添加了pageview_widget_indicator依赖：

dependencies:
  flutter:
    sdk: flutter
  pageview_widget_indicator: ^0.1.0  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

下面是一个完整的示例代码，展示了如何使用PageView和pageview_widget_indicator来创建一个带有页面指示器的页面切换视图：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late PageController _pageController;

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

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView Widget Indicator Example'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: PageView(
              controller: _pageController,
              children: List.generate(
                5,
                index => Center(
                  child: Text(
                    'Page ${index + 1}',
                    style: TextStyle(fontSize: 24),
                  ),
                ),
              ),
            ),
          ),
          CirclePageIndicator(
            pageController: _pageController,
            selectedColor: Colors.blue,
            unselectedColor: Colors.grey,
            selectedSize: 12.0,
            unselectedSize: 8.0,
            dotCount: 5,
          ),
        ],
      ),
    );
  }
}

代码解释

  1. 依赖导入：确保在pubspec.yaml中添加了pageview_widget_indicator依赖。
  2. 页面结构：
    • MyApp：根应用组件。
    • MyHomePage：主页，包含状态管理。
    • _MyHomePageState：主页的状态类，管理PageController。
  3. 页面视图：
    • 使用PageView来创建多个页面，这里我们生成了5个页面，每个页面显示不同的文本。
    • PageController用于控制页面切换。
  4. 指示器：
    • 使用CirclePageIndicator来显示页面指示器，它依赖于PageController。
    • 自定义了选中颜色和未选中颜色，以及选中点和未选中点的大小。

这个示例展示了如何使用pageview_widget_indicator插件来为你的PageView添加一个底部指示器。你可以根据需要进一步自定义指示器的样式和行为。

回到顶部