美文网首页
flutter步骤Stepper

flutter步骤Stepper

作者: wrootlflvl | 来源:发表于2019-07-17 10:39 被阅读0次
class StepperDemo extends StatefulWidget {
  @override
  _StepperDemoState createState() => _StepperDemoState();
}

class _StepperDemoState extends State<StepperDemo> {
  int _currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('StepperDemo'), elevation: 0.0,),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Theme(
              data: Theme.of(context).copyWith(primaryColor: Colors.blue),
              child: Stepper(
                currentStep: _currentStep,
                onStepTapped: (int value) { // 点击步骤的序号触发的方法
                  setState(() {
                    _currentStep = value;
                  });
                },
                onStepContinue: () { // 点击继续触发的方法
                  setState(() {
                    _currentStep < 2 ? _currentStep += 1 : _currentStep = 0;
                  });
                },
                onStepCancel: () { // 点击取消触发的方法
                  setState(() {
                    _currentStep > 0 ? _currentStep -= 1 : _currentStep = 0;
                  });
                },
                steps: [
                  Step(title: Text('提交中'), subtitle: Text('提交中'),content: Text('您的订单正在提交'), isActive: _currentStep == 0),
                  Step(title: Text('待付款'), subtitle: Text('待付款'),content: Text('您的订单尚未支付'), isActive: _currentStep == 1),
                  Step(title: Text('待收货'), subtitle: Text('待收获'),content: Text('您的包裹正在运输中'), isActive: _currentStep == 2),
                ]
              ),
            ),
          ],
        ),
      ),
    );
  }
}

相关文章

网友评论

      本文标题:flutter步骤Stepper

      本文链接:https://www.haomeiwen.com/subject/csaflctx.html