我并不是专业的程序员,所学的专业与软件开发没有太大的关系,一直以来都是将编程学习作为一项爱好而持续着。之前自学过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使用示例,可以看出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使用示例,定义了一个整型变量、一个使变量自增的方法以及一个可点击的浮动按钮,实现通过点击按钮使数字增加的功能。在使用MaterialApp的title参数时,我发现这个参数会在某些手机查看最近使用应用时显示出来,一般我们在手机上查看最近使用应用时,应用截图的上方会显示应用名称,但是在某些手机上,会显示MaterialApp的title设定的名称。