一点一滴学习Flutter (4)——— StatefulWidget和StatelessWidget的使用

我并不是专业的程序员,所学的专业与软件开发没有太大的关系,一直以来都是将编程学习作为一项爱好而持续着。之前自学过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的中间显示文字

        ),

),

);

}

}

《一点一滴学习Flutter (4)——— StatefulWidget和StatelessWidget的使用》 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),

      ),

    );

  }

}

《一点一滴学习Flutter (4)——— StatefulWidget和StatelessWidget的使用》 StatefulWidget示例

以上是一个简单的StatefulWidget使用示例,定义了一个整型变量、一个使变量自增的方法以及一个可点击的浮动按钮,实现通过点击按钮使数字增加的功能。在使用MaterialApp的title参数时,我发现这个参数会在某些手机查看最近使用应用时显示出来,一般我们在手机上查看最近使用应用时,应用截图的上方会显示应用名称,但是在某些手机上,会显示MaterialApp的title设定的名称。

    原文作者:红枣糖水
    原文地址: https://www.jianshu.com/p/d3bb88789f87
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞