Flutter的Stepper

Flutter的Stepper

Flutter的Stepper widget是一个用于创建具有多个步骤的向导/流程的非常实用的组件。每个步骤通常包含一个标题和内容，并且通常具有向前和向后的导航按钮，以便用户可以在步骤之间导航。

使用方法

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

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

dartCopy codeimport 'package:flutter/material.dart';

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

dartCopy codeint _currentStep = 0;

创建一个Stepper widget，设置其类型（垂直或水平）、当前步骤索引和步骤列表。步骤列表是由Step widget组成的列表，每个Step widget都有一个标题和内容，并且通常具有向前和向后的导航按钮，以便用户可以在步骤之间导航。

dartCopy codeStepper(
  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,
)

例子

在这个例子中，Stepper被设置为垂直类型，使用_currentStep变量作为当前步骤的索引，使用onStepContinue和onStepCancel回调函数处理向前和向后导航按钮的单击事件，并且_steps变量是一个包含三个Step widget的列表。

创建一个Step widget列表，每个Step widget都有一个标题和内容，并且通常具有向前和向后的导航按钮，以便用户可以在步骤之间导航。

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


}