Flutter垂直页面切换插件vertical_page_stepper的使用

Flutter垂直页面切换插件vertical_page_stepper的使用

VerticalPageStepper 是一个简单的可定制化步骤指示器。以下是如何使用它的详细指南。

特性

使用方法

请查看示例项目以更好地理解。

VerticalPageStepper(
  pageController: pageController,
  indicatorSettings: StepperIndicatorSettings(
    backgroundColor: Colors.grey.shade300,
    opacity: 0.5,
  ),
  steps: const [
    Step1(),
    Step2(),
    Step3(),
    Step4(),
    Step5(),
  ],
);

步骤应该扩展自 VerticalPageStep 类。

class VerticalPageStep {
  /// 创建一个步骤对象，用于 [VerticalPageStepper]。
  ///
  /// 参数 [title] 和 [content] 不得为空。
  const VerticalPageStep({
    required this.title,
    required this.content,
    this.indicator,
    this.indicatorBackgroundColor,
  });

  /// 步骤的标题，通常描述该步骤。
  final Widget title;

  /// 步骤的内容，出现在 [title] 下方。
  final Widget content;

  /// 指示器小部件，位于 `CircleAvatar` 中。
  /// 通常是图标。
  final Widget? indicator;

  /// 定义步骤特殊指示器背景颜色。
  ///
  /// 当前值会覆盖 `StepperIndicatorSettings` 中的指示器颜色。
  final Color? indicatorBackgroundColor;
}

可用的 StepperIndicatorSettings 参数：

/// 指示器半径，当步骤为当前或已通过时
final double activeRadius;

/// 指示器半径，当其为下一个步骤时
final double radius;

/// 指示器从左边的填充值
final double leftPadding;

/// 指示器背景颜色
final Color? backgroundColor;

/// 当前或已通过的步骤时，指示器背景颜色不透明度。
///
/// 这个值在步骤为下一个步骤时为 0.5
final double opacity;

示例代码

以下是完整的示例代码，展示了如何使用 VerticalPageStepper 插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  late PageController pageController;

  [@override](/user/override)
  void initState() {
    super.initState();
    pageController = PageController(initialPage: 0);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('垂直页面切换示例'),
      ),
      body: Center(
        child: VerticalPageStepper(
          pageController: pageController,
          indicatorSettings: StepperIndicatorSettings(
            backgroundColor: Colors.grey.shade300,
            opacity: 0.5,
          ),
          steps: const [
            Step1(),
            Step2(),
            Step3(),
            Step4(),
            Step5(),
          ],
        ),
      ),
    );
  }
}

class Step1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('步骤1'),
        Text('这是步骤1的内容'),
      ],
    );
  }
}

class Step2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('步骤2'),
        Text('这是步骤2的内容'),
      ],
    );
  }
}

class Step3 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('步骤3'),
        Text('这是步骤3的内容'),
      ],
    );
  }
}

class Step4 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('步骤4'),
        Text('这是步骤4的内容'),
      ],
    );
  }
}

class Step5 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('步骤5'),
        Text('这是步骤5的内容'),
      ],
    );
  }
}