StatelessWidget,这种小部件里面不包含可以变化的状态,State 指的就是状态,状态可以想成是小部件里的数据 .. 也就是 StatelessWidget 小部件一但被创建以后 .. 它里面的状态一般不会有什么变化 ..
现在这个 StateManagementDemo 小部件就是一个 StatelessWidget .. 因为这个小部件继承的是 StatelessWidget ..
在 StatelessWidget 里面,我们可以实施一下 build 方法 .. 在这个方法里面可以去构建这个小部件表示的那部分用户界面 .. 构架在把这个小部件插入到小部件树里面的时候,会调用小部件里的这个 build 方法 ..
这个方法里面,先用了一个 Scaffold .. 它提供了一个基本的页面结构 ... 里面暂时只设置了它的 appBar,顶部的工具栏 ..
这里可以再添加一个 body 属性,设置一下页面的主体 .. 一个 Center 小部件 .. 它的 child 先用一个 Chip .. 然后设置一下它的 label 属性 .. 值是一个 Text ... 要显示的文字可以使用一个变量表示 .. 名字叫 $count ..
上面再去定义一下这个 count .. 它的类型是 int .. 名字叫 count ,暂时让它等于 0 ..
现在界面中间显示的就是一个 Chip 小部件,上面的数据就是 count 变量的值 ...
注意现在 StateManagementDemo 类的名字的上面会出现提示 .. This class inherits from a class marked as @immutable .. 这个类继承的类被标记为了 @immutable .. and therefore should be immutalbe .. all instance fields must be final .. 实例的所有字段都必须是 final 的 ..
意思就是说,我们的这个类继承的 StatelessWidget,它是一个不能有变化的类 .. immutable 就是不能修改,不可改变的意思 .. 这样类里面的字段的值都必须得是 final 的 .. 就是它们一但被分配了值以后就不能再有变化了 ..
因为在这个类里面,count 是一个变量 .. 它是可以有变化的 ... 所以才会出现刚才的提示 .. 如果在它前面加上一个 final ... 提示就会消失了 .. 暂时我们先去掉这个 final ..
再在 Scaffold 里面,添加一个 floatingActionButton ... 对应的值是一个 FloatingActionButton .. 它的 child 可以用一个小图标 .. 图标使用 Icons.add ..
再添加一个 onPressed 属性 .. 点击这个按钮的时候会使用这个方法来处理 .. 里面我们可以让 count 的值加上 1 ..
下面再把 count 的值输出到控制台上检查一下 .. 打开调试控制台 ..
按一下界面上的这个漂浮按钮 .. 你会发现,每次按这个按钮的时候,count 的值都会加上 1 ... 不过在界面上这个 Chip 里面显示的 count 的值没有发生改变 ..
我们创建的小部件的状态会根据用户行为发生变化 ... 这个时候我们需要考虑使用另一种小部件,StatefulWidget ..