一点一滴学习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的中间显示文字

        ),

),

);

}

}


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设定的名称。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342