vertical_scrollable_pageview 是一个用于在 Flutter 中实现垂直滚动页面视图的插件。它允许你在一个垂直滚动的视图中放置多个页面，每个页面可以包含自己的内容。这个插件非常适合需要垂直分页的场景，例如教程、步骤指南或者垂直滚动的画廊。

安装

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

dependencies:
  flutter:
    sdk: flutter
  vertical_scrollable_pageview: ^1.0.0  # 请使用最新版本

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

基本用法

以下是一个简单的示例，展示了如何使用 vertical_scrollable_pageview 插件来创建一个垂直滚动的页面视图：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Vertical Scrollable PageView Example'),
        ),
        body: VerticalScrollablePageView(
          children: [
            Container(
              color: Colors.red,
              child: Center(
                child: Text(
                  'Page 1',
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
              ),
            ),
            Container(
              color: Colors.green,
              child: Center(
                child: Text(
                  'Page 2',
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
              ),
            ),
            Container(
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Page 3',
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

VerticalScrollablePageView 提供了多个参数来定制其行为：

• children: 一个 List<Widget>，表示页面的内容。
• physics: 用于控制滚动行为的 ScrollPhysics，例如 BouncingScrollPhysics 或 ClampingScrollPhysics。
• controller: 一个 PageController，用于控制页面的滚动和监听页面变化。
• scrollDirection: 滚动方向，默认为 Axis.vertical。
• pageSnapping: 是否启用页面吸附效果，默认为 true。

示例：使用 PageController

你可以使用 PageController 来控制和监听页面的滚动：

class MyApp extends StatelessWidget {
  final PageController _pageController = PageController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Vertical Scrollable PageView Example'),
        ),
        body: VerticalScrollablePageView(
          controller: _pageController,
          children: [
            Container(
              color: Colors.red,
              child: Center(
                child: Text(
                  'Page 1',
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
              ),
            ),
            Container(
              color: Colors.green,
              child: Center(
                child: Text(
                  'Page 2',
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
              ),
            ),
            Container(
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Page 3',
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _pageController.nextPage(
              duration: Duration(milliseconds: 300),
              curve: Curves.easeInOut,
            );
          },
          child: Icon(Icons.arrow_downward),
        ),
      ),
    );
  }
}