Flutter Stepper 步骤

本文主要是介绍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: <Widget>[FlatButton(onPressed: onStepContinue,child: const Text('下一步'),),FlatButton(onPressed: onStepCancel,child: const Text('上一步'),),],);},// 步骤集合steps: <Step>[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。越界了！！

效果图

完整代码

查看完整代码

这篇关于Flutter Stepper 步骤的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---