Flutter步骤进度条插件phoenix_step的使用

Flutter步骤进度条插件phoenix_step的使用

特性

phoenix 将作为企业级基础组件:Step，提供项目支持。

开始使用

要开始使用 phoenix_step 插件，首先需要将其添加到你的 pubspec.yaml 文件中：

dependencies:
  phoenix_step: ^版本号

然后运行以下命令以获取依赖项：

flutter pub get

使用步骤进度条插件

示例代码

以下是一个完整的示例代码，展示如何在 Flutter 中使用 phoenix_step 插件来创建一个水平步骤进度条。

import 'package:flutter/material.dart';
import 'package:phoenix_step/phoenix_step.dart'; // 导入 phoenix_step 插件

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const StepExamplePage(title: 'Phoenix Step Example'),
    );
  }
}

class StepExamplePage extends StatefulWidget {
  const StepExamplePage({super.key, required this.title});

  final String title;

  @override
  State<StepExamplePage> createState() => _StepExamplePageState();
}

class _StepExamplePageState extends State<StepExamplePage> {
  int currentStep = 0; // 当前步骤

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            PhoenixStep(
              currentStep: currentStep, // 当前步骤
              steps: [
                StepItem(
                  title: '步骤一',
                  content: '这是步骤一的内容',
                ),
                StepItem(
                  title: '步骤二',
                  content: '这是步骤二的内容',
                ),
                StepItem(
                  title: '步骤三',
                  content: '这是步骤三的内容',
                ),
              ],
              onChange: (int step) {
                setState(() {
                  currentStep = step;
                });
              },
            ),
            const SizedBox(height: 20),
            Text('当前步骤: ${currentStep + 1}'),
          ],
        ),
      ),
    );
  }
}

// 定义步骤项
class StepItem {
  final String title;
  final String content;

  StepItem({required this.title, required this.content});
}

代码说明

1. 导入插件：

   import 'package:phoenix_step/phoenix_step.dart';

   这一步是导入 phoenix_step 插件的核心功能。

2. 定义步骤项：

   class StepItem {
     final String title;
     final String content;
   
     StepItem({required this.title, required this.content});
   }

   定义了一个简单的 StepItem 类来表示每个步骤的标题和内容。

3. 创建步骤进度条：

   PhoenixStep(
     currentStep: currentStep, // 当前步骤
     steps: [
       StepItem(
         title: '步骤一',
         content: '这是步骤一的内容',
       ),
       StepItem(
         title: '步骤二',
         content: '这是步骤二的内容',
       ),
       StepItem(
         title: '步骤三',
         content: '这是步骤三的内容',
       ),
     ],
     onChange: (int step) {
       setState(() {
         currentStep = step;
       });
     },
   )

   使用 PhoenixStep 创建步骤进度条，并通过 onChange 回调函数来更新当前步骤。

4. 显示当前步骤：

   Text('当前步骤: ${currentStep + 1}')