Flutter页面视图滑动指示器插件page_view_sliding_indicator的使用

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

Flutter页面视图滑动指示器插件page_view_sliding_indicator的使用

page_view_sliding_indicator 是一个带有滑动效果的页面视图指示器。它可以在用户滑动页面时动态更新指示器的状态。

示例

下面是使用 page_view_sliding_indicator 的完整示例代码：

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

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试运行你的应用并使用 "flutter run" 命令。你会看到应用有一个蓝色工具栏。然后，不退出应用，
        // 改变下面的主色调为 Colors.green 并触发 "热重载"（在运行 "flutter run" 的控制台中按 "r" 键，
        // 或者直接保存你的更改以进行 "热重载"）。注意计数器并没有重置回零；应用并没有重启。
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 300,
            child: PageView(
              scrollDirection: Axis.horizontal,
              controller: controller,
              children: const [
                Center(
                  child: Text('First Page'),
                ),
                Center(
                  child: Text('Second Page'),
                ),
                Center(
                  child: Text('Third Page'),
                )
              ],
            ),
          ),
          const SizedBox(
            height: 24,
          ),
          PageViewSlidingIndicator(
            pageCount: 3, // 页面总数
            controller: controller, // PageController 实例
            size: 8, // 指示器大小
          ),
        ],
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用page_view_sliding_indicator插件的示例代码。这个插件可以帮助你在使用PageView时添加滑动指示器。

首先，你需要在pubspec.yaml文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  page_view_sliding_indicator: ^latest_version  # 请确保使用最新版本

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

接下来，你可以在你的Flutter项目中使用这个插件。以下是一个完整的示例代码，展示了如何使用PageView和PageViewSlidingIndicator：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PageView Sliding 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 Sliding 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),
                  ),
                ),
              ),
            ),
          ),
          PageViewSlidingIndicator(
            controller: _pageController,
            itemCount: 5,
            indicatorColor: Colors.blue,
            indicatorActiveColor: Colors.blueAccent,
            indicatorSize: 10.0,
            indicatorSpace: 5.0,
            indicatorMargin: 10.0,
          ),
        ],
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个MyApp和一个MyHomePage小部件。
  2. 在MyHomePage中，我们初始化了PageController并在PageView中使用它。
  3. PageView包含了5个简单的页面，每个页面上都显示一个文本。
  4. PageViewSlidingIndicator小部件用于显示滑动指示器，它接收PageController和页面总数itemCount作为参数。
  5. 其他参数如indicatorColor、indicatorActiveColor、indicatorSize、indicatorSpace和indicatorMargin允许你自定义指示器的外观。

运行这个示例代码，你应该能看到一个带有滑动指示器的PageView。当你滑动页面时，指示器会相应地更新。

回到顶部