如需转载,请注明出处:Flutter学习笔记(9)--组件Widget

在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调用setState()来通知框架,框架会再次调用State的构建方法来更新用户界面),Flutter会自动通过绑定的数据更新Widget,所以你需要做的就是实现Widget界面,并且和数据绑定起来。

Widget分为有状态StatefulWidget和无状态StatelessWidget两种,在Flutter中,Widget仅支持一帧,理解起来就是一次性绘制整个界面,无状态就是指当绘制完这一帧后,保持在这一帧的状态下不会变化,而有状态的Widget当数据更新时,其实是绘制了新的Widget,只是state实现了跨帧的数据同步保存。

上面简单的说了有状态和无状态两种Widget,那么我们该怎么选择在什么时机有哪种Widget呢?举两个简单的例子说明一下

1.在app的启动页面,我们需要展示一张启动图,但是展示过后,我们不需要这张图片发生任何的改变,保持在这一帧的状态下就可以了,这时候,我们就可以选择无状态StatelessWidget

2.在一个页面里面,有一个text和一个button,需求是点击button后,text的内容需要发生变化,也就是说根据用户交互或在网络请求下,页面需要发生变化,需要重新绘制,这种情况下,我们就需要有状态的StatefulWidget。

如果还是有一点不理解的话,那就记住一个规则:如果一个widget发生了变化(例如用户交互、网络请求更新页面),那么它就是有状态的,反之,如果widget绘制完之后,不会发生任何变化,那么它就是无状态的。

上面我们已经讲了无状态和有状态的widget,接下来具体讲一下这两种的实现方式:

  • 无状态StatelessWidget

继承StatelessWidget,通过build返回一个布局好的组件

import 'package:flutter/material.dart';

void main() => runApp(DEMOWidget());

class DEMOWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '无状态Widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('无状态Widget Demo'),
        ),
        body: Center(
          child: Text('这是一个无状态的Demo'),
        ),
      ),
    );
  }
}
  • 有状态StatefulWidget

import 'package:flutter/material.dart';

void main() => runApp(SampleApp());

class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => new _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text
  String textToShow = "I Like Flutter";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample App"),
      ),
      body: new Center(child: new Text(textToShow)),
      floatingActionButton: new FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: new Icon(Icons.update),
      ),
    );
  }

  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }
}

下一章节:Flutter学习笔记(10)--基础知识

Flutter学习笔记(9)--组件Widget的更多相关文章

  1. Flutter学习笔记(10)--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

  2. Flutter学习笔记(11)--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  3. Flutter学习笔记(12)--列表组件

    如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...

  4. Flutter学习笔记(13)--表单组件

    如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...

  5. Flutter学习笔记(8)--Dart面向对象

    如需转载,请注明出处:Flutter学习笔记(7)--Dart异常处理 Dart作为高级语言,支持面向对象的很多特性,并且支持基于mixin的继承方式,基于mixin的继承方式是指:一个类可以继承自多 ...

  6. Flutter学习笔记(4)--Dart函数

    如需转载,请注明出处:Flutter学习笔记(4)--Dart函数 Dart是一个面向对象的语言,所以函数也是对象,函数属于Function对象,函数可以像参数一样传递给其他函数,这样便于做回调处理: ...

  7. Flutter学习笔记(5)--Dart运算符

    如需转载,请注明出处:Flutter学习笔记(5)--Dart运算符 先给出一个Dart运算符表,接下来在逐个解释和使用.如下:                            描述       ...

  8. Flutter学习笔记(6)--Dart异常处理

    如需转载,请注明出处:Flutter学习笔记(6)--Dart异常处理 异常是表示发生了意外的错误,如果没有捕获异常,引发异常的隔离程序将被挂起,并且程序将被终止: Dart代码可以抛出并捕获异常,但 ...

  9. Android学习笔记⑤——UI组件的学习TextView相关

    TextView是一个强大的视图组件,直接继承了View,同时也派生出了很多子类,TextView其作用说白了就是在布局中显示文本,有点像Swing编程中的JLabel标签,但是他比JLabel强大的 ...

随机推荐

  1. SPFA 的两个优化

    From NOCOW SPFA算法有两个优化算法 SLF 和 LLL: SLF:Small Label First 策略,设要加入的节点是j,队首元素为i,若dist(j)<dist(i),则将 ...

  2. APP-BOM-20516 错误处理一例

    昨天在处理一个工单异常时,需要将一个Released的工单改为Unreleased状态,程序报APP-BOM-20516错误,如下图.百度只搜到两条记录,均无用.Google能搜到的多一些,也无用.进 ...

  3. C++学习42 输入和输出的概念

    我们经常用到的输入和输出,都是以终端为对象的,即从键盘输入数据,运行结果输出到显示器屏幕上.从操作系统的角度看,每一个与主机相连的输入输出设备都被看作一个文件.除了以终端为对象进行输入和输出外,还经常 ...

  4. [转]Nodejs进程间通信

    本文转自:http://www.cnblogs.com/rubyxie/articles/8949417.html 一.场景 Node运行在单线程下,但这并不意味着无法利用多核/多机下多进程的优势 事 ...

  5. Beta冲刺第二周王者荣耀交流协会第六次会议

    1.立会照片 成员:王超,高远博,冉华,王磊,王玉玲,任思佳,袁玥全部到齐. master:任思佳 2.时间跨度: 2017年11月22日 12:00 — 12:20,总计20分钟. 3.地点: 一食 ...

  6. python 全栈开发,Day134(爬虫系列之第1章-requests模块)

    一.爬虫系列之第1章-requests模块 爬虫简介 概述 近年来,随着网络应用的逐渐扩展和深入,如何高效的获取网上数据成为了无数公司和个人的追求,在大数据时代,谁掌握了更多的数据,谁就可以获得更高的 ...

  7. Differences Between Enterprise, Standard and Standard One Editions on Oracle 11.2 (Doc ID 1084132.1)

    标准版不允许并行.分区.闪回.各种缓存等大数据量必须特性,如此限制,oracle摆明了只卖企业版,买标准版不如mysql(如果不熟悉postgresql的话). Oracle企业版1 CPU 20w起 ...

  8. BZOJ 4408: [Fjoi 2016]神秘数 可持久化线段树

    4408: [Fjoi 2016]神秘数 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4408 Description 一个可重复数字集 ...

  9. Restful安全认证及权限的解决方案

    一.Restful安全认证常用方式 1.Session+Cookie 传统的Web认证方式.需要解决会话共享及跨域请求的问题. 2.JWT JSON Web Token. 3.OAuth 支持两方和三 ...

  10. LCD相关基础知识

    1.什么是LCD? (1)LCD(Liquid Crystal Display)俗称液晶.液晶是一种材料,液晶这种材料具有一种特点:可以在电信号的驱动下液晶分子进行旋转,旋转时会影响透光性, 因此我们 ...