Flutter Stepper 步骤

步骤组件是用来约束用户操作的，第一步完成后才能进入下一步。所有步骤都完成，才可进行提交操作。 

参数详解

属性	说明
steps	步骤内容集合
physics	步骤跳转动画
type	StepperType.vertical
currentStep	步骤位置
onStepTapped	状态改变时触发
onStepContinue	点击 continue 时触发
onStepCancel	点击 cancel 时触发
controlsBuilder	自定义控件
以下是每一步（Step）的属性
title	主标题
subtitle	副标题
content	内容
state	StepState.indexed 此为默认状态,步骤数 StepState.eidting 编辑状态 StepState.complete 完成状态 StepState.disabled 不可用状态 StepState.error 错误状态
isActive	导航是否高亮

代码示例

Stepper(
  //当前步骤下标
  currentStep:this.currentStepIndex,
  //上一步
  onStepCancel: (){
    setState(() {
      currentStepIndex--; 
    });
  },
  //下一步
  onStepContinue: (){
    setState(() {
      currentStepIndex++; 
    });
  },
  //自定义按钮
  controlsBuilder:(BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}){
    return Row(
      children: [
        FlatButton(
          onPressed: onStepContinue,
          child: const Text('下一步'),
        ),
        FlatButton(
          onPressed: onStepCancel,
          child: const Text('上一步'),
        ),
      ],
    );
  },
  // 步骤集合
  steps: [
    Step(
      title: Text('我是标题1'),
      content: Text('我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1'),
      subtitle:Text('我是副标题1111'),
      isActive: true,
      
    ),
    Step(
      title: Text('我是标题1'),
      content: Text('我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1'),
    ),
    Step(
      title: Text('我是标题1'),
      content: Text('我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1'),
    ),
    Step(
      title: Text('我是标题1'),
      content: Text('我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1我是内容1'),
    ),
  ],

),

示例代码 为的更加清楚组件使用，并未添加校验，不停点击下一步或上一步会报错 steps.length': is not true。越界了！！

效果图

完整代码

查看完整代码