Flutter垂直步骤导航插件bg_vertical

Flutter垂直步骤导航插件bg_vertical_stepper的使用

bg_vertical_stepper 是一个非常有用的组件，用于以垂直方式展示从一个步骤到另一个步骤的过程。它特别适用于展示多步骤过程中的进度，例如表单填写、结账流程或引导流程。

特性

可自定义的垂直方向的步骤。
每个步骤之间由虚线连接。
轻松集成并使用于您的 Flutter 项目中。

截图

安装

要使用此包，在项目的 pubspec.yaml 文件中添加 bg_vertical_stepper 作为依赖项：

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

然后运行 flutter pub get 来安装该包。

使用方法

以下是一个基本示例，展示如何在 Flutter 项目中使用 bg_vertical_stepper 包：

import 'package:flutter/material.dart';
import 'package:bg_vertical_stepper/src/step.dart' as step;

void main() => runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建一个步骤列表

    List<step.Step> stepper = [
      step.Step(
        shimmer: false,
        title: "第一步",
        iconStyle: Colors.green,
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("内容 1"),
        ),
      ),
      step.Step(
        shimmer: false,
        title: "第二步",
        iconStyle: Colors.green,
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("内容 2"),
        ),
      ),
      step.Step(
        shimmer: false,
        title: "第三步",
        iconStyle: Colors.green,
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("内容 3"),
        ),
      ),
      step.Step(
        shimmer: false,
        title: "第四步",
        iconStyle: Colors.green,
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("内容 4"),
        ),
      ),
      step.Step(
        shimmer: false,
        title: "第五步",
        iconStyle: Colors.red,
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("内容 5"),
        ),
      ),
      step.Step(
        shimmer: false,
        title: "最后一步",
        content: Align(
          alignment: Alignment.centerLeft,
          child: Text("内容 6"),
        ),
      )
    ];

    // 将步骤列表传递给 VerticalStepper 组件

    return Scaffold(
        body: Padding(
      padding: const EdgeInsets.fromLTRB(10, 130, 10, 2),
      child: step.VerticalStepper(
        steps: stepper,
        dashLength: 2,
      ),
    ));
  }
}

测试

要运行 bg_vertical_stepper 包的测试，使用以下命令：

flutter test

bupafengyu 1楼

更多关于Flutter垂直步骤导航插件bg_vertical_stepper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

bg_vertical_stepper 是一个用于 Flutter 的垂直步骤导航插件，它可以帮助你创建类似于向导或步骤指示器的界面。以下是如何使用 bg_vertical_stepper 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  bg_vertical_stepper: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 bg_vertical_stepper 包：

import 'package:bg_vertical_stepper/bg_vertical_stepper.dart';

3. 使用 BgVerticalStepper

BgVerticalStepper 组件允许你定义多个步骤，并为每个步骤指定标题、子标题和内容。以下是一个简单的示例：

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

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

class _StepperExampleState extends State<StepperExample> {
  int _currentStep = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Vertical Stepper Example'),
      ),
      body: BgVerticalStepper(
        currentStep: _currentStep,
        onStepContinue: () {
          if (_currentStep < 2) {
            setState(() {
              _currentStep += 1;
            });
          }
        },
        onStepCancel: () {
          if (_currentStep > 0) {
            setState(() {
              _currentStep -= 1;
            });
          }
        },
        steps: [
          BgStep(
            title: Text('Step 1'),
            subtitle: Text('Subtitle for Step 1'),
            content: Text('This is the content of Step 1.'),
          ),
          BgStep(
            title: Text('Step 2'),
            subtitle: Text('Subtitle for Step 2'),
            content: Text('This is the content of Step 2.'),
          ),
          BgStep(
            title: Text('Step 3'),
            subtitle: Text('Subtitle for Step 3'),
            content: Text('This is the content of Step 3.'),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: StepperExample(),
  ));
}