我并不是专业的程序员，所学的专业与软件开发没有太大的关系，一直以来都是将编程学习作为一项爱好而持续着。之前自学过C语言，JAVA，Python、单片机嵌入式开发等，这次看到Flutter1.0版本发布后就想着自学，然后用Flutter写出一个安卓软件。零零碎碎地学习到现在也将近两个月了，写下这些文章，为的是将阅读官方文档所学到的知识回顾总结出来，更是为了记录下那些踩过的坑，如果有表述得不专业或者错误的地方，还请指出。
StatefulWidget和StatelessWidget的使用参考了官方文档：1、Write your first Flutter app； 2、StatefulWidget class；3、StatelessWidget class；
我所选用的IDE工具是google官方的Andriod Studio，官方下载链接为：Android Studio ；
系统运行环境为windows10 专业版 17763.316 ；
系列文章链接如下：1、一点一滴学习Flutter (1)——— Flutter的安装；2、一点一滴学习Flutter (2)——— Flutter项目的创建；3、一点一滴学习Flutter (3)——— Flutter项目的调试；4、一点一滴学习Flutter (4)——— StatefulWidget和StatelessWidget的使用；
使用Flutter进行安卓APP开发，首先要面对的就是StatefulWidget和StatelessWidget这两大类。用我的直观感受概括来说，StatefulWidget创建的Widget是界面可变的Widget，而StatelessWidget创建的Widget则为界面不可变的Widget。(Widget可以理解为Flutter提供给我们选择使用的组件，使用Flutter开发的APP就是用一个接着一个的Widget嵌套、组装而成，有点类似与HTML语法。)
StatefulWidget在整个生命周期可以改变很多次，在StatefulWidget的Widget可以在运行的过程中变换多次进行逻辑交互，以传达作者想要展示的信息。例如改变文字、改变颜色、改变大小、改变形状、改变图片等等我们经常能够见到的变化。
StatelessWidget在初始化之后就无法再改变。想要使用StatelessWidget进行逻辑交互，通过改变某些变量以改变Widget的样式是不可行的，使用前应当注意。
以上只是我使用一段时间后的粗略概括，更详细的内容还需要阅读官方文档。
1)StatelessWidget使用示例：
import 'package:flutter/material.dart';//标准的开头导入库文件
void main() =>runApp(FlutterApp());//程序的入口函数，从main函数开始运行整个程序。
class FlutterApp extends StatelessWidget {//创建一个继承于StatelessWidget名字为FlutterApp的类
@override
Widget build(BuildContext context) {//FlutterApp的类的构建函数
return MaterialApp(
title:'StatelessWidgetTest',
home:Scaffold(
appBar:AppBar(
title:Text('StatelessWidgetTest'),//在APP的上方显示标题
),
body:Center(
child:Text("StatelessWidget Test"),//在APP的中间显示文字
),
),
);
}
}
StatelessWidget示例
以上是一个简单的StatelessWidget使用示例，可以看出Widget嵌套使用的特性，MaterialApp里有个Scaffold，Scaffold里有 AppBar、Text和Center，这些都是Widget。当使用嵌套太多时，会产生很多小括号加冒号、小括号加逗号的组合，交叉出现，让人眼花缭乱，不知道哪一个小括号是属于哪一个Widget，特别是要增加或者修改Widget时，往往会删错了小括号，或者少删了小括号。所以，在使用Widegt时要注意格式以及缩进，以方便我们增减。
2)StatefulWidget使用示例：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { //使用StatelessWidget创建一个名为MyApp的类，这个类定义了软件的整体布局
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'StatefulWidgetTest Demo',
home: StatefulWidgetTest(), //home参数则为软件中我们所想要展示信息的区域，它像是一块画布，让我们在上面作画(放置Widget)
);
}
}
class StatefulWidgetTest extends StatefulWidget { //StatefulWidgetTest和下面的StatefulWidgetTestState需配套使用
@override
StatefulWidgetTestState createState() => StatefulWidgetTestState();
}
class StatefulWidgetTestState extends State<StatefulWidgetTest> {
int counter = 0;
void Counter() { //自定义一个用以使counter自增的函数
setState(() { //使用setState函数才能够更新界面，否则只有counter的自增时不够的。setState函数相当于使用了一次createState()，所以才能够更新界面
counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("StatefulWidgetTest"), //appBar展示的标题信息
),
body: Center(
child: Column( //可在垂直方向排列足够多Widget的Widget
children: <Widget>[
Text(
'请点击加号',
),
Text(
'$counter', //引用counter变量
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: Counter, //onPressed参数定义了按钮点击后执行什么操作
child: Icon(Icons.add),
),
);
}
}
StatefulWidget示例
以上是一个简单的StatefulWidget使用示例，定义了一个整型变量、一个使变量自增的方法以及一个可点击的浮动按钮，实现通过点击按钮使数字增加的功能。在使用MaterialApp的title参数时，我发现这个参数会在某些手机查看最近使用应用时显示出来，一般我们在手机上查看最近使用应用时，应用截图的上方会显示应用名称，但是在某些手机上，会显示MaterialApp的title设定的名称。
网友评论