android steper 控件,Flutter 步骤进度组件

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

Stepper

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

Stepper(

steps: [

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'),

subtitle: Text('老孟'),

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: [],

);

},

...

)

效果如下：

修改下面的2个按钮：

Stepper(

controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}){

return Row(

children: [

RaisedButton(

child: Text('确定'),

onPressed: onStepContinue,

),

RaisedButton(

child: Text('取消'),

onPressed: onStepCancel,

),

],

);

},

...

)

效果如下：

Stepper(

controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}){

return Row(

children: [

FlatButton(

child: Text('确定'),

onPressed: onStepContinue,

),

FlatButton(

child: Text('取消'),

onPressed: onStepCancel,

),

],

);

},

onStepTapped: (index) {

setState(() {

_currentStep = index;

});

},

onStepContinue: (){},

onStepCancel: (){},

...

)

效果如下：

交流

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