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

效果如下：

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】：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!