Flutter 步骤进度组件

概述​老孟导读：最近文章更新拖后腿了，一直忙着网站改版的事情，今天总算落地了，全新的Flutter网站即将上线，敬请期待。网站目前收集197个组件的详细用法，还有150多个组件待整理。 Stepper S

​老孟导读：最近文章更新拖后腿了，一直忙着网站改版的事情，今天总算落地了，全新的Flutter网站即将上线，敬请期待。网站目前收集197个组件的详细用法，还有150多个组件待整理。

Stepper

Stepper控件是一个展示一系列步骤进度的控件，用法如下：

Stepper(  steps: <Step>[    Step(      Title: Text('2020-4-23'),content: Text('今天是2020-4-23')    ),Step(        Title: Text('2020-4-24'),content: Text('今天是2020-4-24')    ),Step(        Title: Text('2020-4-25'),content: Text('今天是2020-4-25')    ),],)

效果如下：

Step还可以设置subTitle属性，用法如下：

Step(  Title: Text('2020-4-23'),subTitle: Text('老孟'),content: Text('今天是2020-4-23'))

效果如下：

state参数可以设置为StepState.complete、StepState.indexed等，其余参数可以参考StepState类，用法如下：

Step(  Title: Text('2020-4-23'),content: Text('今天是2020-4-23'),state: StepState.complete)

影响字体样式和圆圈内图标：

设置为StepState.error的效果：

点击事件：

Stepper(  onStepCancel: (){    print('onStepCancel');  },onStepContinue: (){    print('onStepContinue');  },onStepTapped: (index){    print('onStepTapped:$index');  },...)

onStepCancel：点击CANCEL回调。

onStepContinue：点击CONTINUE回调。

onStepTapped：点击Step时回调。

效果如下：

切换显示的Step，设置如下：

int _currentStep = 0;Stepper(      onStepTapped: (index) {        setState(() {          _currentStep = index;        });      },currentStep: _currentStep,...)

效果如下：

我们最关心的是每一个Step下面的2个按钮如何去掉呢？可以使用controlsBuilder，用法如下：

Stepper(  controlsBuilder: (BuildContext context,{VoIDCallback onStepContinue,VoIDCallback onStepCancel}){    return Row(      children: <Widget>[],);  },...)

效果如下：

修改下面的2个按钮：

Stepper(  controlsBuilder: (BuildContext context,VoIDCallback onStepCancel}){    return Row(      children: <Widget>[        Raisedbutton(          child: Text('确定'),onpressed: onStepContinue,),Raisedbutton(          child: Text('取消'),onpressed: onStepCancel,...)

效果如下：

Stepper(  controlsBuilder: (BuildContext context,VoIDCallback onStepCancel}){    return Row(      children: <Widget>[        Flatbutton(          child: Text('确定'),Flatbutton(          child: Text('取消'),onStepTapped: (index) {    setState(() {      _currentStep = index;    });  },onStepContinue: (){},onStepCancel: (){},...)

效果如下：

交流

老孟Flutter博客地址（近200个控件用法）：http://laomengit.com

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

总结

以上是内存溢出为你收集整理的Flutter 步骤进度组件全部内容，希望文章能够帮你解决Flutter 步骤进度组件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。