StatefulWidget和StatelessWidget

  • StatefulWidget : 具有可变状态的窗口部件,也就是你在使用应用的时候就可以随时变化,比如我们常见的进度条,随着进度不断变化。
  • StatelessWidget:不可变状态窗口部件,也就是你在使用时不可以改变,比如固定的文字(写上后就在那里了,死也不会变了)。

lutter中一切皆widget,这和RN中一切皆组件的思想很类似,因此在学习Flutter中,我们必须首先来了解Flutter的widget.下面先从最基本的MaterialApp和Scaffold开始了解

1 MaterialApp
一个封装了很多Android MD设计所必须要的组件的小部件,一般作为顶层widget使用。

继承关系
Inheritance
Object->Diagnosticable ->DiagnosticableTree ->Widget ->StatefulWidget ->MaterialApp

一般与以下widget一起使用
Scaffold: Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。
Navigator,用于管理应用程序的页面堆栈。
MaterialPageRoute,它定义以特定于材料的方式转换的应用页面。
WidgetsApp,它定义基本的app元素但不依赖于材质库。

一般来说,在Flutter中,我们如果遵循MD设计时,顶层的Widget一般是MaterialApp,这里面我们可以指定主题样式,以便应用与APP整个页面中

2 Scaffold
Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。
简单来说,Scanold就是一个提供MD设计中基本布局的widget,包括最上面的appBar,body,以及下部的drawer,snackbar等

继承关系
Object –>Diagnosticable ->DiagnosticableTree ->Widget ->StatefulWidget ->Scaffold

常用元素
appBar 标题栏
backgroundColor 背景色
body 内容区

Flutter学习简记的更多相关文章

  1. Flutter 学习资料

    Flutter 学习资料: 学习资料 网址 Flutter 中文网 https://flutterchina.club/ <Flutter实战>电子书 https://book.flutt ...

  2. Flutter学习笔记与整合

    1.Dart 面向对象语言,与java类比学习 非常适合移动和Web应用程序 1.dart官网 2.Dark2 中文文档 3.Dart语法学习 4.极客学院Dart学习 5.Flutter与Dart ...

  3. Flutter学习指南:UI布局和控件

    Flutter学习指南:UI布局和控件 - IT程序猿  https://www.itcodemonkey.com/article/11041.html

  4. Flutter学习笔记(3)--Dart变量与基本数据类型

    一.变量 在Dart里面,变量的声明使用var.Object或Dynamic关键字,如下所示: var name = ‘张三’: 在Dart语言里一切皆为对象,所以如果没有将变量初始化,那么它的默认值 ...

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

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

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

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

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

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

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

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

  9. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

随机推荐

  1. HDU 3065 病毒侵袭持续中(AC自动机 模板)题解

    题意:给出主串中每个模式串的个数 思路:毒瘤出题人多组数据没说给的是多组数据. 板子: struct Aho{ struct state{ int next[130]; int fail, cnt; ...

  2. node.js & read argv

    node.js & read argv https://nodejs.org/docs/latest/api/process.html https://flaviocopes.com/node ...

  3. chrome devtools dark mode

    chrome devtools dark mode default dark mode https://medium.com/@eshwaren/dark-theme-for-chrome-devel ...

  4. MacBook Pro 关闭触控板

    MacBook Pro 关闭触控板 https://support.apple.com/zh-cn/HT204895 https://support.apple.com/zh-cn/HT203171 ...

  5. TypeScript Generics

    TypeScript Generics https://www.typescriptlang.org/docs/handbook/generics.html 泛型 1 Generic Interfac ...

  6. element-ui的树型结构图,带有复选框的,没有子项的,横排展示

    // 修改树形图样式,如果不含有下箭头的块,要变成行内样式 treeChildInline(){ let hasCaretRight = $("#permission_panel" ...

  7. Renice INC:全球经济危机持续,2021年红酒市场走向如何?

    2021年,全球经济危机仍在持续,很多国家的经济出现了严重的下滑,不得不以降低利率维持经济.那么,全球经济危机对于红酒市场有什么影响?2021年,红酒市场走势如何呢?近日,美国知名红酒公司伦尼斯公司对 ...

  8. NGK Global-下一个千亿市场来袭

    6月4日,NGK Global开启了全球巡回路演,NGK全球社区经过激烈的讨论,最终决定由美国社区发起,在纽约举办NGK Global第一场路演. 路演讲师Viko就NGK的IPFS协议以及NGK未来 ...

  9. 「NGK每日快讯」12.3日NGK公链第30期官方快讯!

  10. Union international INC评德意志联邦投入十亿欧元重启文化娱乐产业

    当地时间6月4日,德国联邦政府宣布了一项名为"重启文化"(Neustart Kultur)的计划,将投入总计10亿欧元,用以支持德国文化及创意产业的恢复和重建. Union int ...