Flutter基础之StatefulWidget基本使用

我们在创建项目的时候 默认给我们携带的程序中是一个按钮点后页面的数字会随着改变

这是我们使用 StatelessWidget 不可以实现的 因为在我们继承了StatelessWidget 后所有的变量都要设置成 final 类型 而这个类型是不可变属性

@immutable
abstract class Widget extends DiagnosticableTree {
// ...省略代码
}

immutable

结论: 定义到Widget中的数据一定是不可变的,需要使用final来修饰

当我们要实现动态数据改变的时候需要继承 StatefulWidget

StatefulWidget

我们来实现一个 和初始化项目一样 的小案例

class MyCounterWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// 将创建的State返回
return MyCounterState();
}
}

下面这个类才是真正的去操作数据的类

class MyCounterState extends State<MyCounterWidget> {
int counter = 0;
@override
Widget build(BuildContext context) {
return Center(
child: Text("当前计数:$counter", style: TextStyle(fontSize: 30),),
);
}
}

接下来我们来实现 一个按钮 我们可以使用内置 的 按钮小组件

RaisedButton(
// 按钮文字
child: Text('加'),
// 按钮颜色
color: Colors.blue,
// 按钮字的颜色
textColor: Colors.white,
// 点击事件
onPressed: () => {
print('点击了')
}
),

这个是我们flutter 内部提供的一个按钮小组件 但是大家会发现 跟初始化那个加号小按钮不一样

当然我们默认案例中使用的是 FloatingActionButton 按钮组件 用什么都是可以 的

状态改变

接下来就是我们点击给数字加一就可以了 我们第一反应是在 点击事件中直接++

// 点击事件
onPressed: () => {
counter++
}

然而这样是不会更新我们的页面但是数据会被更新 只是页面没有发生更新

我们需要使用和 React 差不多的一个方法来更新页面

setState(() {})

是不是和 React 的很相似 但是也有不一样的地方这里是执行的一个匿名函数

我们可以将数据状态改变放在外面也可以放在内部都是可以的这个 setState 主要作用是更新页面状态

onPressed: () => {
setState(() {
myNum++;
})
}),

然后我们就完成了点击按钮从而更新页面数据

大家可以实现一下 添加一个点击减掉一的按钮事件

完整代码

import 'package:flutter/material.dart';

main(List<String> args) {
runApp(myApp());
}

class myApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "名称",
home: myStateone(),
);
}
}

class myStateone extends StatefulWidget {
@override
myState createState() => myState();
}

class myState extends State {
int myNum = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("标题")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('加'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () => {
setState(() {
myNum++;
})
}),
Text(
"当前数字:$myNum",
style: TextStyle(fontSize: 30, color: Colors.red),
),
]),
),
);
}
}

上一篇

ECMAScript6新特性基本内容学习与理解