Flutter 步骤进度组件
老孟导读:最近文章更新拖后腿了,一直忙着网站改版的事情,今天总算落地了,全新的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')
),
],
)
效果如下:
![image-20200424120848105](http://img.laomengit.com/image-20200424120848105.png)
Step
还可以设置subtitle
属性,用法如下:
Step(
title: Text('2020-4-23'),
subtitle: Text('老孟'),
content: Text('今天是2020-4-23')
)
效果如下:
![image-20200424121110332](http://img.laomengit.com/image-20200424121110332.png)
state
参数可以设置为StepState.complete、StepState.indexed等,其余参数可以参考StepState类,用法如下:
Step(
title: Text('2020-4-23'),
subtitle: Text('老孟'),
content: Text('今天是2020-4-23'),
state: StepState.complete
)
影响字体样式和圆圈内图标:
![image-20200424121659585](http://img.laomengit.com/image-20200424121659585.png)
设置为StepState.error
的效果:
![image-20200424121737159](http://img.laomengit.com/image-20200424121737159.png)
点击事件:
Stepper(
onStepCancel: (){
print('onStepCancel');
},
onStepContinue: (){
print('onStepContinue');
},
onStepTapped: (index){
print('onStepTapped:$index');
},
...
)
onStepCancel
:点击CANCEL
回调。
onStepContinue
:点击CONTINUE
回调。
onStepTapped
:点击Step时回调。
效果如下:
![image-20200424140537550](http://img.laomengit.com/image-20200424140537550.png)
切换显示的Step,设置如下:
int _currentStep = 0;
Stepper(
onStepTapped: (index) {
setState(() {
_currentStep = index;
});
},
currentStep: _currentStep,
...
)
效果如下:
![stepper_1](http://img.laomengit.com/stepper_1.gif)
我们最关心的是每一个Step下面的2个按钮如何去掉呢?可以使用controlsBuilder
,用法如下:
Stepper(
controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}){
return Row(
children: <Widget>[],
);
},
...
)
效果如下:
![image-20200424142009875](http://img.laomengit.com/image-20200424142009875.png)
修改下面的2个按钮:
Stepper(
controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}){
return Row(
children: <Widget>[
RaisedButton(
child: Text('确定'),
onPressed: onStepContinue,
),
RaisedButton(
child: Text('取消'),
onPressed: onStepCancel,
),
],
);
},
...
)
效果如下:
Stepper(
controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}){
return Row(
children: <Widget>[
FlatButton(
child: Text('确定'),
onPressed: onStepContinue,
),
FlatButton(
child: Text('取消'),
onPressed: onStepCancel,
),
],
);
},
onStepTapped: (index) {
setState(() {
_currentStep = index;
});
},
onStepContinue: (){},
onStepCancel: (){},
...
)
效果如下:
![image-20200424142520292](http://img.laomengit.com/image-20200424142520292.png)
交流
老孟Flutter博客地址(近200个控件用法):http://laomengit.com
欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:
![]() |
![]() |
posted on 2020-04-25 15:22 老孟Flutter 阅读(1489) 评论(0) 编辑 收藏 举报