Flutter垂直步骤指示器插件vertical_steps_indicator的使用
Flutter垂直步骤指示器插件vertical_steps_indicator的使用
垂直步骤指示器组件
一个用于自定义步骤指示器的Flutter包,适用于在应用程序中可视化多步流程。
版本0.0.2的新特性
🚀 新功能
-
动态步骤项:引入了
StepItemModel
以实现灵活的步骤定制。每个步骤现在可以包含:- 标题部件。
- 最多两个子标题部件(
subtitle1
,subtitle2
)。 - 自定义内容部件以适应不同的设计需求。
-
自定义指示器:
selectedIndicator
:自定义当前步骤的指示器。normalIndicator
:覆盖非当前步骤的指示器外观。
🛠 改进
-
指示器类型控制:添加了
IndicatorType
枚举以指定:onlyCurrent
:仅高亮当前步骤。previous
:高亮当前步骤及其所有前序步骤。
-
动态步骤高度:添加了
stepItemHeight
以精确控制步骤项的高度。
✨ 增强
- 步骤重构:更新了
steps
以使用List<StepItemModel>
以提高灵活性。 - 错误处理:如果在
StepItemModel
中既未提供title
也未提供contents
,则会抛出错误。
功能
- 默认步骤指示器:简洁的指示器设计。
- 虚线步骤指示器:现代风格的虚线样式。
- 可定制颜色:轻松设置指示器、背景和边框的颜色。
- 灵活布局:支持动态步骤和当前步骤的定制。
安装
在pubspec.yaml
文件中添加以下依赖:
dependencies:
vertical_steps_indicator: ^0.0.2
然后运行:
flutter pub get
使用
以下是使用StepsIndicatorWidget
的基本示例:
基本示例
StepsIndicatorWidget(
steps: [
StepItemModel(title: Text('Step 1')),
StepItemModel(title: Text('Step 2')),
StepItemModel(contents: Text('Custom Step Content')),
],
currentStep: 1,
)
虚线线段示例
StepsIndicatorWidget(
steps: [
StepItemModel(title: Text('Step 1')),
StepItemModel(
title: Text('Step 2'),
subtitle1: Text('Subtitle to step 2')),
StepItemModel(
title: Text('Step 3'),
subtitle1: Text('Subtitle to step 3'),
subtitle2: Text('Subtitle 2 to step 3')),
],
currentStep: 1,
lineType: LineType.dashed,
indicatorType: IndicatorType.previous,
),
高级示例
StepsIndicatorWidget(
steps: [
StepItemModel(title: Text('Step 1'), subtitle1: Text('Start Here')),
StepItemModel(title: Text('Step 2'), subtitle1: Text('In Progress')),
StepItemModel(contents: Text('Final Step Content')),
],
currentStep: 2,
indicatorType: IndicatorType.onlyCurrent,
lineType: LineType.dashed,
indicatorColor: Colors.teal,
backgroundColor: Colors.pink.shade100,
borderColor: Colors.teal.shade200,
selectedIndicator: Icon(Icons.check_circle, color: Colors.green),
normalIndicator: Icon(Icons.circle_outlined, color: Colors.grey),
)
更多关于Flutter垂直步骤指示器插件vertical_steps_indicator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter垂直步骤指示器插件vertical_steps_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter中使用vertical_steps_indicator
插件的一个示例。这个插件可以帮助你创建一个垂直的步骤指示器,通常用于显示多步骤流程中的当前步骤。
首先,你需要在你的pubspec.yaml
文件中添加该插件的依赖:
dependencies:
flutter:
sdk: flutter
vertical_steps_indicator: ^最新版本号 # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
接下来是一个完整的示例代码,展示了如何使用vertical_steps_indicator
插件:
import 'package:flutter/material.dart';
import 'package:vertical_steps_indicator/vertical_steps_indicator.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Vertical Steps Indicator Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
int currentStep = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Vertical Steps Indicator Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Expanded(
child: VerticalStepsIndicator(
steps: [
StepInfo(
title: 'Step 1',
content: 'This is the first step',
),
StepInfo(
title: 'Step 2',
content: 'This is the second step',
),
StepInfo(
title: 'Step 3',
content: 'This is the third step',
),
],
currentStep: currentStep,
onStepTapped: (index) {
setState(() {
currentStep = index;
});
},
stepDone: [false, false, false], // 标记哪些步骤已完成
stepActiveColor: Colors.blue,
stepInactiveColor: Colors.grey,
stepDoneColor: Colors.green,
stepConnectorColor: Colors.grey.withOpacity(0.5),
stepConnectorActiveColor: Colors.blue,
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (currentStep < 2) {
setState(() {
currentStep += 1;
// 假设完成当前步骤,将其标记为已完成
// 你可以根据业务逻辑动态更新 stepDone 数组
List<bool> stepDone = List.from(state.stepDone);
stepDone[currentStep - 1] = true;
// 这里只是示例,实际上你需要一个更好的状态管理方式来更新 stepDone
});
} else {
// 最后一步的处理逻辑
}
},
child: Text('Next Step'),
),
],
),
),
);
}
}
// 假设的 StepInfo 类(实际使用时,根据插件提供的 API 修改)
class StepInfo {
String title;
String content;
StepInfo({required this.title, required this.content});
}
// 注意:上面的 StepInfo 类是假设的,因为 vertical_steps_indicator 插件可能
// 有自己的数据模型。你需要根据插件的实际 API 文档来调整这部分代码。
// 另外,由于我无法直接访问到 vertical_steps_indicator 插件的源码和文档,
// 因此上述代码中的某些属性(如 stepDone)可能需要以不同的方式处理。
// 请查阅插件的官方文档以获取正确的用法。
请注意,上面的StepInfo
类是根据假设创建的,因为vertical_steps_indicator
插件可能有自己的数据模型。你需要根据插件的实际API文档来调整这部分代码。另外,由于我无法直接访问到vertical_steps_indicator
插件的源码和文档,因此某些属性(如stepDone
)可能需要以不同的方式处理。
在实际使用时,请查阅插件的官方文档和示例代码,以确保正确使用。