美文网首页Flutter学习笔记
Flutter 自定义步骤控件Stepper

Flutter 自定义步骤控件Stepper

作者: 王俏 | 来源:发表于2019-10-07 16:43 被阅读0次
    int _currentStep = 0;
    Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('StepDemo'),
            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.black,
                  ),
                  child: Stepper(
                    controlsBuilder: (BuildContext context,
                        {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
                      return Row(
                        children: <Widget>[
                          FlatButton(
                            onPressed: onStepContinue,
                            child: const Text('CONTINUE'),
                          ),
                          FlatButton(
                            onPressed: onStepCancel,
                            child: const Text('Up Step'),
                          ),
                        ],
                      );
                    },
                    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("Login"),
                        subtitle: Text('Login first'),
                        content: Text(
                            'Cupidatat sunt voluptate esse velit dolor voluptate elit amet pariatur et amet in.'),
                        isActive: _currentStep == 0,
                      ),
                      Step(
                        title: Text("Choose Plan"),
                        subtitle: Text('Choose you plan'),
                        content: Text(
                            'Cupidatat sunt voluptate esse velit dolor voluptate elit amet pariatur et amet in.'),
                        isActive: _currentStep == 1,
                      ),
                      Step(
                        title: Text("Confirm payment"),
                        subtitle: Text('Confirm your payment method'),
                        content: Text(
                            'Cupidatat sunt voluptate esse velit dolor voluptate elit amet pariatur et amet in.'),
                        isActive: _currentStep == 2,
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        );
      }
    

    效果图


    step.png

    相关文章

      网友评论

        本文标题:Flutter 自定义步骤控件Stepper

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