继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Flutter 步骤进度组件

老孟Flutter
关注TA
已关注
手记 47
粉丝 16
获赞 4

​老孟导读:最近文章更新拖后腿了,一直忙着网站改版的事情,今天总算落地了,全新的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

Step还可以设置subtitle属性,用法如下:

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

效果如下:

image-20200424121110332

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

Step(
  title: Text('2020-4-23'),
  subtitle: Text('老孟'),
  content: Text('今天是2020-4-23'),
  state: StepState.complete
)

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

image-20200424121659585

设置为StepState.error的效果:

image-20200424121737159

点击事件:

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

onStepCancel:点击CANCEL回调。

onStepContinue:点击CONTINUE回调。

onStepTapped:点击Step时回调。

效果如下:

image-20200424140537550

切换显示的Step,设置如下:

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

效果如下:

stepper_1

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

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

效果如下:

image-20200424142009875

修改下面的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

交流

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

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP