stepper_stepper跟scanner - CSDN
精华内容
参与话题
  • Flutter实战之Stepper的简单使用

    千次阅读 2019-12-12 16:01:23
    Stepper组件展示了一些列的步骤。这个组件可以让我们处理这样的逻辑:让前一步(step)完成的时候,下一个步骤(step)才能开始的一系列相关的事件,其运行效果。可能描述的不是太清楚,具体效果可以看官网给的例子...

    Stepper组件展示了一些列的步骤。这个组件可以让我们处理这样的逻辑:让前一步(step)完成的时候,下一个步骤(step)才能开始的一系列相关的事件,其运行效果。可能描述的不是太清楚,具体效果可以看官网给的例子图片:
    在这里插入图片描述

    在这里就详细的说一下Stepper组件的用法:
    每一个步骤(step)都有如下的状态(StepState):,此状态为枚举类型

    状态名 状态说明
    indexed 此为默认状态,此状态下会在圆圈里里展示当前步骤的索引,代表着当前是第几个步骤(从1开始)
    eidting 编辑状态,此状态太下会在
    complete 完成状态,此状态下会在圆圈里显示一个对号
    disabled 不可用状态,此状态下状态标题字体颜色是灰色,且不会响应onStepTapped事件
    error 错误状态,此状态下会显示一个带有叹号的红色三角形来替代其余状态下的圆圈,步骤标题和副标题字体颜色都是红色

    为了更直观的说明上述状态,下面看下具体的运行效果:

    在这里插入图片描述
    细心的读者可能会发现步骤二的圆圈是蓝色的,这个其实是将Stepper组件的isActive属性设置为true的结果。

    下面就来看看这个组件怎么用,在阅读下文之前可以点击此处看看具体的运行效果gif图


    Step对象的使用:

    首先上面的步骤A到步骤F其实是一个List<Step>对象的集合,每一步用一个Step表示,Step的属性如下所示:

      const Step({
        @required this.title,///步骤标题
        this.subtitle,//步骤副标题
        @required this.content,//当前步骤的内容
        this.state = StepState.indexed,//当前步骤的状态,默认是indexed状态
        this.isActive = false,//当前状态是否激活
      })
    

    所以,如果想要上图实现步骤三的状态,那么Step就如下所示:

      Step(
          title: Text('stepTitle C'),
          subtitle:Text('error状态'),
          state: StepState.error,
          content:  Card(
              color:Colors.red,
              child:SizedBox(
                child: Center( child: Text("设置state: StepState.error,表明此步骤错误,为进度条显示红色警告"),),
                width: 600.0,
                height: 100.0,
              )
          ),
        )
    

    我们将Step对象组成一个List集合steps交给Stepper组件的 steps属性使用。另外Stepper组件有一个currentStep属性,代表着当前步骤位于哪一步,比如如果这个属性是1,那么就是说步骤2的content内容将会展示出来,其余的step的content都是关闭状态,运行效果如下:
    在这里插入图片描述
    注意到了没有,上面有一个CONTINUE和CANCEl这两个按钮,这两个按钮是Stepper自动给每一个Step对象追加的,当我们点击continue的时候将会打开下一个步骤C且关闭自己(StepB),这是怎么实现的呢?在Stepper组件中提供了onStepCancel和onStepContinue两个监听函数,实现之即可,代码如下:

     currentStep: this.current_step,
           onStepCancel: () {//回到上一步
             setState(() {
               if (current_step > 0) {
                 current_step = current_step - 1;
               } else {
                 current_step = 0;
               }
             });
           },
           onStepContinue: () {//下一步
             setState(() {
               if (current_step < steps.length - 1) {
                 current_step = current_step + 1;
               } else {
                 current_step = 0;
               }
             });
           },
         )
    

    到此为止,Steper的使用讲解完毕,下面附上本片博文的demo源码,供大家参考。或者从博主的github上下载源码

    import 'package:flutter/material.dart';
    class StepperDemo extends StatefulWidget {
      @override
      _StepperState createState() => _StepperState();
    }
    class _StepperState extends State<StepperDemo> {
      int current_step = 0;
      List<Step> steps =[
        Step(
          title: Text('stepTitle A'),
          subtitle:Text('disabled状态') ,
          state: StepState.disabled,
          content: Card(
              color:Colors.red,
              child:SizedBox(
                child: Center( child: Text("设置state: StepState.disabled,注意标题setTitle A字体颜色为灰色,此时该Step"
                    "不会响应onStepTapped 事件"),),
                width: 600.0,
                height: 100.0,
              )
          ),
        ),
        Step(
          title: Text('stepTitle B'),
          subtitle:Text('activie为true'),
          isActive: true,
          content:  Card(
              color:Colors.blue,
              child:SizedBox(
                child: Center( child: Text("设置isActive: true,此时步骤2为蓝色"),),
                width: 600.0,
                height: 100.0,
              )
          ),
        ),
        Step(
          title: Text('stepTitle C'),
          subtitle:Text('error状态'),
          state: StepState.error,
          content:  Card(
              color:Colors.red,
              child:SizedBox(
                child: Center( child: Text("设置state: StepState.error,表明此步骤错误,为进度条显示红色警告"),),
                width: 600.0,
                height: 100.0,
              )
          ),
        ),
        Step(
          title: Text('stepTitle D'),
          subtitle:Text('editing状态'),
          state: StepState.editing,
          content:  Card(
              color:Colors.yellow,
              child:SizedBox(
                child: Center( child: Text("设置state: StepState.editing,自动设置了编辑状态的铅笔标志"),),
                width: 600.0,
                height: 50.0,
              )
          ),
        ),
        Step(
          title: Text('stepTitle E'),
          subtitle:Text('indexed状态'),
          state: StepState.indexed,
          content:  Card(
              color:Colors.pink,
              child:SizedBox(
                child: Center( child: Text("设置state: StepState.indexed,此状态为默认状态,显示当前步骤的索引"),),
                width: 600.0,
                height: 50.0,
              )
          ),
        ),
        Step(
          title: Text('stepTitle F'),
          subtitle:Text('complete状态'),
          state: StepState.complete,
          content:  Card(
              color:Colors.pink,
              child:SizedBox(
                child: Center( child: Text("设置state: StepState.complete,此状态为默认状态,显示对号"),),
                width: 600.0,
                height: 50.0,
              )
          ),
        ),
      ];
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Center(child: Text("Stepper简单使用")),
              elevation: 0.0,
            ),
            body: _createStepper()
        );
      }
    
      Widget _createStepper(){
         return Stepper(
             steps:  steps,
             onStepTapped: (step) {///点击某step直接打开
               setState(() {
                 current_step = step;
               });
             },
           currentStep: this.current_step,
           onStepCancel: () {//回到上一步
             setState(() {
               if (current_step > 0) {
                 current_step = current_step - 1;
               } else {
                 current_step = 0;
               }
             });
           },
           onStepContinue: () {//下一步
             setState(() {
               if (current_step < steps.length - 1) {
                 current_step = current_step + 1;
               } else {
                 current_step = 0;
               }
             });
           },
         );
      }
    
      Widget test(){
        return Container(
          margin:const EdgeInsets.all(10.0),
          color: const Color(0xFF00FF00),
          width: 48.0,
          height: 48.0,
        );
      }
    }
    
    展开全文
  • 问题来源 最近自学Arduino,在使用步进电机时开始没能使步进电机转起来,转...Stepper库函数 这个是Arduino库函数,用于控制步进电机,官网Stepper说明网址为https://www.arduino.cc/en/Reference/Stepper,下面介绍...

    问题来源

    最近自学Arduino,在使用步进电机时开始没能使步进电机转起来,转起来后感觉没法调速,遂完成此篇笔记供自己后续查阅以及方便遇到相同问题的诸君寻找灵感。对于如何使步进电机转动就不详述,网上有很多。

    Stepper库函数

    这个是Arduino库函数,用于控制步进电机,官网Stepper说明网址为https://www.arduino.cc/en/Reference/Stepper,下面介绍个人理解:

    • Stepper
      两种调用形式,Stepper(steps, pin1, pin2)与Stepper(steps, pin1, pin2, pin3, pin4),主要是看电机是两相还是四相,该函数作用是创建Stepper类的实例,参数steps应该是所使用的的电机转一周需要的步数(脉冲数),通过电机步距角计算。后面的pin1,2,3,4,依据实际情况填写。注意这个函数需要写在程序开始,即在void setup()之上。
    • setSpeed
      调用形式setSpeed(rpms),这个是控制转述的函数,实际是脉冲频率,参数为每分钟电机转的步数。数值为正整数。该函数不会使电机旋转。
    • step
      step(steps),这个函数是使电机转过固定的步数,只有当电机转过指定步数之后才会执行该语句的下一条语句。参数应该是整数,正负号控制旋转方向。

    调速

    读了上面就知道step()函数是控制转速的。
    导致我怀疑电机不能调速的原因是设置不同参数电机都旋转很慢,事实证明我买的电机就只能转这么快。step(300)就到达我所用电机与ULN2003的极限,而此前我不理解网上那程序上述函数的具体意义,调了一通参数也没见到步进电机快速旋转。此外使用电机与驱动器不同,会导致别人程序中的备注文字并不使用与我所写的程序,因此误解别人程序,导致调速迟迟不能成功。

    实例

    //使用arduino IDE自带的Stepper.h库文件
    #include <Stepper.h>
    
    // 这里设置步进电机旋转一圈是多少步,依据步距角计算,及走一圈需要多少脉冲
    #define STEPS 64
    
    //设置步进电机的步数和引脚(就是驱动板上IN1~IN4连接的四个数字口)。
    Stepper stepper(STEPS, 8, 9, 10, 11);
    
    void setup()
    {
      // 设置电机的转速:每分钟为90步
      stepper.setSpeed(290);
      // 初始化串口,用于调试输出信息
      Serial.begin(9600);
    }
    
    void loop()
    {
        // 顺时针旋转
        Serial.println("shun");
        stepper.step(2048); 
        //delay(500);
    
        // 逆时针旋转
        /*
        Serial.println("ni");
        stepper.step(-512);
        delay(500);
        */
    }
    
    展开全文
  • 步骤条(Stepper

    千次阅读 2019-07-01 18:05:16
    Stepper 有以下常用属性: currentStep → int - 步骤位置。 onStepCancel → VoidCallback - 点击 cancel 时触发。 onStepContinue → VoidCallback - 点击 continue 时触发。 onStepTapped → ValueChanged ...

    Stepper 有以下常用属性:

     

    currentStep → int - 步骤位置。

    onStepCancel → VoidCallback - 点击 cancel 时触发。

    onStepContinue → VoidCallback - 点击 continue 时触发。

    onStepTapped → ValueChanged - 状态改变时触发。

    steps → List - 步骤内容。

    type → StepperType - 摆放方向,默认是垂直的,可以设置为水平的。

     

    Stepper(
        currentStep: 0,  // <-- 激活的下标
        steps: <Step>[
            new Step(
                title: new Text('第一步'),
                content: new Text('第一步内容'),
                state: StepState.complete,
                isActive: true,
                subtitle: new Text('第一步小标题'),
            ),
            new Step(
                title: new Text('第二步'),
                content: new Text('第二步内容'),
            ),
            new Step(
                title: new Text('第三步'),
                content: new Text('第三步内容'),
            ),
        ],
    )
    

     

     

    展开全文
  • StepperView

    2019-02-15 09:37:18
    StepperView 项目地址:FilipeLipan/StepperView  简介:A custom view that morphs base on the quantity of steps provided 更多:作者 提 Bug  标签: ...An Android CustomView that morphs base on the ...

    StepperView

    项目地址:FilipeLipan/StepperView 

    简介:A custom view that morphs base on the quantity of steps provided

    更多:作者   提 Bug   

    标签:

     

    An Android CustomView that morphs base on the quantity of steps provided

    展开全文
  • Arduino Stepper

    2020-07-29 14:20:40
    Arduino 自带的第三方库,用于步进电机运行用。并支持两相和四相两种类型的步进电机。
  • iOS5编程--新增控件stepper的使用

    千次阅读 2011-09-22 10:49:37
    在iOS5中,新增了一个控件,stepper,这个控件的使用非常简单 1.新建一个Single View Application,打开Viewcontroller.xib 2.在view上加入一个stepper控件 3.如下图,设置相关属性 stepper的Val
  • #include &quot;AccelStepper.h&quot; // 电机步进方式定义 #define FULLSTEP 4 //全步进参数 #define HALFSTEP 8 //半步进参数 // 定义步进电机引脚 #define motor1Pin1 8 // 一号28BYJ48连接的ULN...
  • UIStepper

    千次阅读 2012-07-11 15:08:00
    - (void)viewDidLoad {  [super viewDidLoad];  // Do any additional setup after loading the view, typically from a nib.   ... UIStepper *stepper = [[UIStepper alloc] init];... stepper.ta
  • Arduino-步进电机

    千次阅读 2018-06-10 16:13:01
    Stepper.h&gt; #define STEPS 100 Stepper stepper(STEPS,8,9,10,11); void setup(){ stepper.setSpeed(90); Serial.begin(9600); } void loop() { Serial.println("shun"); stepper.step(2...
  • 驱动示例如下,注意Stepper stepper(STEPS, 8, 9, 10, 11),改为Stepper stepper(STEPS, 8, 10, 9, 11)即可,该程序在arduino UNO板上运行后,电机正反转没有问题,但在esp8266运行时只能“单向旋转”,旋转方向或正...
  • 之前讲过通过storyboard的方式捕获控件的...首先定义一个stepper和一个label,用label来显示stepper的当前值。 self.priceStepper = UIStepper(frame: CGRectMake(150, 120, 100, 20)) self.priceStepper.minimumVal
  • 1、用到的硬件设备以及最终实验效果 用到一个5V直流步进电机(28BYJ-48),然后一块对应的电机驱动(主芯片是ULN2003A),一个Arduino UNO开发板。我们最终实现的效果是,在Matlab GUI界面上输入想让电机正转(反转...
  • iOS UIStepper加减按钮

    千次阅读 2016-04-20 13:33:10
    - (void)setStepper:(UIStepper *)stepper {  // 初始值  stepper.value = 1;  // 最大值  stepper.maximumValue = 100;  // 最小值  stepper.minimumValue = 1;  // 点击增减值
  • 1.安装npm参考https://blog.csdn.net/traguezw/article/details/54577560可能遇到以下问题1.下载地址官方下载不了可以在中文网上下载...安装使用按照官方# 安装项目依赖 npm install # 执行组件编译 npm run dev过程...
  • css计步器 购物车中的+ - 样式

    千次阅读 2018-06-07 10:35:09
    效果如下:全部代码&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="...width=device-width, initial-scale=1, maximum-scale=1, user-scalable=n
  • iOS5新增内容之UIStepper控件详解

    万次阅读 2012-08-03 14:23:24
    在iOS5中新增了一个数字输入控件UIStepper,它可以递进式输入数量。UIStepper继承自UIControl,它主要的事件是UIControlEventValueChanged,每当它的值改变了就会触发这个事件。它的显示效果如下: ...
  • swift UI专项训练32 Stepper微调控件

    千次阅读 2015-03-02 12:39:42
    跟滑块对应的时Stepper微调控件,有时候我们需要精确地变动,那么就不能用滑块来做,Stepper每次以一个固定的值来增加或者减少,它的设置跟滑块比就比较相似了: 也有最大值最小值和当前值,不同的是有Step这个值...
  • UIStepper - 步进控件

    千次阅读 2016-03-25 16:30:13
    UIStepper - 步进控件继承关系 NSObject ->UIResponder -> UIView ->UIControl -> UIStepper 概述UIStepper界面包括一个“+”按钮和一个“-”按钮,通过这两个按钮来增加和减小值,通常用于对特定范围值的精确...
  • 本篇介绍步进电机驱动库的使用,通过读取电位器输入,控制步进电机转动相应角度。
  • iOS开发之基础视图—— UIStepper

    千次阅读 2016-05-18 13:23:31
    UIStepper是一个微调器,该控件的外观和UISwitch相似,但该控件上包含了+,-两个按钮,共同用于控制某个值的增、减。  它继承了UIControl基类,默认属于活动控件,它可以与用户交互并激发相应的事件处理方法。...
1 2 3 4 5 ... 20
收藏数 1,939
精华内容 775
热门标签
关键字:

stepper