Flutter的Stepper

Flutter的Stepper的简介

在Flutter中，Stepper（步进器）是一个用于创建逐步操作流程的UI控件。通常，步进器用于引导用户完成多个步骤或阶段的操作，例如创建一个多步骤表单、完成一个向导或者进行其他逐步操作。Stepper小部件提供了一种简便的方式来管理和导航这些步骤。

每个步骤通常包含一个标题和内容，并且通常具有向前和向后的导航按钮，以便用户可以在步骤之间导航。

Stepper的详细介绍

以下是有关如何使用Stepper的详细介绍：

使用方法

以下是Flutter中Stepper widget的基本使用方法：

导入flutter/material.dart包

首先，导入flutter/material.dart包，这样您就可以使用Stepper widget。

import 'package:flutter/material.dart';

创建状态变量

然后，创建一个状态变量，该变量将控制当前活动的步骤索引。

int _currentStep = 0;

创建Stepper

创建一个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列表，每个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对象的创建：

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(),
    );
  }


}

例子效果图

效果如图：