Flutter之计数器案例

752 阅读2分钟

第一步

  • 在lib下创建increase文件夹
  • 在increase文件夹下创建increase.dart
  • 在main.dart文件下引入increase.dart

Image.png

Image.png

第二步

incease.dart

Image.png

Image.png

  • 在这个组件中我们使用动态组件StatefulWidget
  • 每一个动态组件里面都需要一个createState函数,意思就是生成状态
  • 每一个动态组件都需要一个控制器,用来对组件内部的状态进行控制,并且渲染被控制组件的UI结构
  • 控制器内部的build函数,用来渲染被控制的组件的UI结构
  • 控制器有命名要求,_+被控制组件名字+State<被控制组件>
  • 在变量当中下划线的用法要谨慎,当下划线在变量名前面的时候,代表这个组件或者这个函数/值是私有的
  • State<>,这个尖括号里要写被控制组件名

然后把控制名进行替换

Image.png

  • 类型写控制器名字,返回值是控制器类的实例

第三步

我们开始写这个计数器

main.dart中

首先我们在main.dart里往计数器组件里传个值

Image.png

如果是静态组件需要接收参数

Image.png

如果是动态组件需要接收参数

Image.png

  • 如果我们传递的是数字字符串,那么可以用第一种方式,如果是传递组件/类,那么就用第二种,第二种是系统规定写法

必传

Image.png

然后我们在控制器里使用参数

widget.参数名来拿参数

Image.png

第四步

我们先写一个基本页面

Image.png

Image.png

我们再加一个按钮

Image.png

页面当中的数字需要增加,我们就定义一个状态值

Image.png

Image.png

数字需要增加,那么我们需要写一个函数去实现数字的增加

Image.png

Image.png

但是,此时你点按钮是不生效的,我们这边数据更新了,但是视图没有更新,需要setState方法

Image.png

如果不使用setState,那么我们的视图不会刷新