在Flutter中，Stepper（步进器）是一个用于创建逐步操作流程的UI控件。通常，步进器用于引导用户完成多个步骤或阶段的操作，例如创建一个多步骤表单、完成一个向导或者进行其他逐步操作。Stepper小部件提供了一种简便的方式来管理和导航这些步骤。
每个步骤通常包含一个标题和内容，并且通常具有向前和向后的导航按钮，以便用户可以在步骤之间导航。
以下是有关如何使用Stepper的详细介绍：
以下是Flutter中Stepper widget的基本使用方法：
首先，导入flutter/material.dart包，这样您就可以使用Stepper widget。
import 'package:flutter/material.dart';
然后，创建一个状态变量，该变量将控制当前活动的步骤索引。
int _currentStep = 0;
创建一个Stepper widget，设置其类型（垂直或水平）、当前步骤索引和步骤列表。步骤列表是由Step widget组成的列表，每个Step widget都有一个标题和内容，并且通常具有向前和向后的导航按钮，以便用户可以在步骤之间导航。
Stepper(
type: StepperType.vertical,
currentStep: _currentStep,
onStepContinue: () {
setState(() {
_currentStep < _steps.length - 1
? _currentStep += 1
: _currentStep = 0;
});
},
onStepCancel: () {
setState(() {
_currentStep > 0 ? _currentStep -= 1 : _currentStep = 0;
});
},
steps: _steps,
)
创建一个Step widget列表，每个Step widget都有一个标题和内容，并且通常具有向前和向后的导航按钮，以便用户可以在步骤之间导航。
List<Step> _steps = [
Step(
title: Text('Step 1'),
content: Text('This is the first step.'),
isActive: _currentStep == 0,
),
Step(
title: Text('Step 2'),
content: Text('This is the second step.'),
isActive: _currentStep == 1,
),
Step(
title: Text('Step 3'),
content: Text('This is the third step.'),
isActive: _currentStep == 2,
),
];
在这个例子中，_steps变量是一个包含三个Step widget的列表，每个Step widget都有一个标题、内容和isActive属性。isActive属性指示当前步骤是否处于活动状态，它的值根据当前步骤的索引和_step变量的值来确定。
下面这个例子详细说明了各个回调函数的用法
Stepper(
currentStep: _currentStep, // 当前步骤的索引
onStepTapped: (step) {
// 当用户点击步骤时触发的回调
setState(() {
_currentStep = step;
});
},
onStepContinue: () {
// 当用户点击“继续”按钮时触发的回调
if (_currentStep < _steps.length - 1) {
setState(() {
_currentStep++;
});
}
},
onStepCancel: () {
// 当用户点击“取消”按钮时触发的回调
if (_currentStep > 0) {
setState(() {
_currentStep--;
});
}
},
steps: _steps, // 步骤列表
)
让我们详细解释上述代码中的关键部分：
currentStep：这是一个整数值，表示当前选中的步骤的索引。你可以将其与onStepTapped回调一起使用，以便在用户点击步骤时更新当前步骤。
onStepTapped：这是一个回调函数，当用户点击某个步骤时触发。通常，你会在这个回调中更新currentStep，以反映用户选择的步骤。
onStepContinue：这是一个回调函数，当用户点击“继续”按钮时触发。通常，你会在这个回调中增加currentStep的值，以使用户前进到下一步。
onStepCancel：这是一个回调函数，当用户点击“取消”按钮时触发。通常，你会在这个回调中减少currentStep的值，以使用户返回上一步。
steps：这是一个步骤列表，每个步骤都是一个Step对象。每个Step对象包括一个标题和内容，你可以自定义这些内容以适应你的需求。
下面是一个示例Step对象的创建：
Step(
title: Text('Step 1'),
content: Text('This is the content for Step 1.'),
)
在这个示例中，Step包括一个标题（标题可以是任何Widget）和内容（也可以是任何Widget）。你可以根据需要添加更多的Step对象。
Stepper控件的外观和行为可以根据你的设计需求进行自定义，包括颜色、图标、按钮文本等。你可以使用controlsBuilder属性自定义步骤操作按钮的外观和文本。
通过使用Stepper小部件，你可以轻松创建具有多个步骤的用户界面，以引导用户完成各种复杂的任务和操作。
在这个例子中，Stepper被设置为垂直类型，使用_currentStep变量作为当前步骤的索引，使用onStepContinue和onStepCancel回调函数处理向前和向后导航按钮的单击事件，并且_steps变量是一个包含三个Step widget的列表。
Stepper widget提供了一种方便的方式来创建多步骤的向导/流程，使用户可以轻松地在步骤之间导航，并且可以很容易地自定义每个步
源码如下：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var _currentStep = 0;
List<Step> _widgetList = [];
_myStepper() {
return Stepper(
steps: _getStepList(),
physics: const AlwaysScrollableScrollPhysics(),
type: StepperType.vertical,
currentStep: _currentStep,
onStepTapped: (index) {
print('step index = $index');
setState(() {
_currentStep = index;
});
},
onStepContinue: () {
setState(() {
if (_currentStep < _widgetList.length - 1) {
_currentStep++;
}
});
},
onStepCancel: () {
setState(() {
if (_currentStep > 0) {
_currentStep--;
}
});
},
);
}
_myStep(int i) {
return Step(
title: Text('Step title$i'),
subtitle: Text('Step subtitle$i'),
content: Text('Step content$i'),
state: _getStepState(i),
isActive: _currentStep == i ? true : false,
);
}
_getStepState(int i) {
switch (i) {
case 1:
return StepState.editing;
case 2:
return StepState.disabled;
case 3:
return StepState.complete;
case 4:
return StepState.error;
default:
return StepState.indexed;
}
}
_getStepList() {
_widgetList.clear();
for (var i = 0; i < 10; i++) {
_widgetList.add(_myStep(i));
}
return _widgetList;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stepper'),
),
body: _myStepper(),
);
}
}
效果如图：
