1. 基本介绍

Stepper 是 flutter 提供的步骤选择器。

Stepper.png

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

4. Stepper 详解

Stepper 的属性其实比较简单，更多的其实是 Stepper 之外的逻辑，在文章末尾会对整体思路进行归纳。

import 'package:flutter/material.dart';

class FMStepperVC extends StatefulWidget{
  @override
  FMStepperState createState() => FMStepperState();
}

class FMStepperState extends State <FMStepperVC>{
  int _currentStep = 0;
  List <FMStepperModel> _datas = [];

  @override
  void initState(){
    super.initState();

    initData();
  }

  void initData(){
    _datas.clear();

    _datas.add(FMStepperModel("第一步", "我们先进行第一步", 0));
    _datas.add(FMStepperModel("第二步", "我们先进行第二步", 1));
    _datas.add(FMStepperModel("第三步", "我们先进行第三步", 2));
    _datas.add(FMStepperModel("第三步", "我们先进行第四步", 3));
    _datas.add(FMStepperModel("第三步", "我们先进行第五步", 4));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Stepper"),),
      body: _listView(),
    );
  }

  ListView _listView(){
    return ListView(
      children: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Container(
            width: 500,
            height: 200,
            child: _stepper(StepperType.horizontal),
          ),
        ),
        Padding(
          padding: EdgeInsets.all(15),
          child: Container(
            color: Colors.yellow,
            height: 30,
            alignment: Alignment.center,
            child: Text("下方为纵向 Stepper"),
          ),
        ),
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Container(
            width: 400,
            height: 500,
            child: _stepper(StepperType.vertical),
          ),
        ),
      ],
    );
  }


  Stepper _stepper(type){
    return Stepper(
      currentStep: _currentStep, // 当前 step
      physics: ClampingScrollPhysics(), // 滑动的物理效果
      type: type, // Stepper 类型，分为横向与纵向两种， StepperType
      // 内容下方按钮构建函数
      controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
        return Row(
          children: <Widget>[
            FlatButton(
              onPressed: onStepContinue,
              child: const Text('NEXT'),
            ),
            FlatButton(
              onPressed: onStepCancel,
              child: const Text('CANCEL'),
            ),
            FlatButton(
              onPressed: (){
                print("自定义按钮点击事件");
              },
              child: const Text('自定义按钮'),
            )
          ],
        );
      },
      // step 点击回调函数
      onStepTapped: (index){
        print(index);
        _currentStep = index;
        setState(() {

        });
      },
      // Cancel 按钮点击回调函数
      onStepCancel: (){
        if(_currentStep > 0){
          _currentStep--;
        }
        setState(() {

        });
      },
      // Next 按钮点击回调函数
      onStepContinue: (){
        if(_currentStep < _datas.length - 1){
          _currentStep++;
        }
        setState(() {

        });
      },
      // <Step> 子控件数组
      steps: _steps(),
    );
  }

  // 创建 <Step> steps 数组
  List <Step> _steps(){
    List <Step> steps = [];
    _datas.forEach((model) {
      // 我们根据当前 step 进行区分，当前 step 之前的认为 StepState.complete，当前认为 StepState.editing，之后认为 StepState.indexed
      if(_currentStep < model.index) {
        model.state = StepState.indexed;
      } else if(_currentStep == model.index) {
        model.state = StepState.editing;
      } else if(_currentStep > model.index){
        model.state = StepState.complete;
      }

      steps.add(
        Step(
          // 标题控件
          title: Row(
            children: [
              Icon(Icons.title),
              Text("title"),
            ],
          ),
          subtitle: Text("subTitle"), // 副标题控件
          content: Text("${model.content}"), // 内容控件
          isActive: (_currentStep == _datas.indexOf(model)), // 是否激活状态，true 时会变成蓝色
          state: model.state, // 当前 step 的状态，StepState 会改变每一个 step 的图标
        ),
      );
    });
    return steps;
  }
}

class FMStepperModel {
  String title;
  String content;
  int index;
  StepState state = StepState.indexed;

  FMStepperModel(this.title, this.content, this.index);
}

Stepper.gif

5. 技术小结

• 第一步，我们既然要做一个 Stepper，我们要准备一套数据模型，并且模型包含了状态，标题，内容，下标，等各个元素，然后将这些数据构造出来当做数据源。
• 第二步，我们创建 Stepper，并对一些属性进行设置。
• 第三步，我们创建 steps，这里很重要，要根据我们第一步中的数据源，将每一个 model 构造成对应的 Step 控件。
• 第四步，我们在创建 steps 时，对 model 的状态进行管理，设置编辑中，已完成，未完成等不同状态。
• 第五步，我们对 Stepper 的交互事件进行处理，点击时将 currentStep 设置到对应 index，cancel 时我们执行 currentStep -1 操作，Next 时我们执行 currentStep +1 操作，此处注意防止越界。