从零开始学习flutter-控件1

说明

本文是记录自己学习flutter过程,帮助自己整理flutter相关知识

StatelessWidget和StatefulWidget

StatelessWidget 和 StarefulWidget均是flutter中的基类部件,有点类似android中的View。但是官方说明,android中的view对应的是Widget。所以为了更好理解,我这里将他想象成 静态View和动态View
静态View StatelessWidget 在flutter中,所有的属性是初始化后,不可修改的,可以理解他所有的属性均被final修饰,只有初始化的时候赋值生效。
动态View StatefulWidget 不同于StatelessWidget ,他是可以修改属性的。所以有修改数据需求时需要继承StatefulWidget来实现自己的Widget树。

简单例子

import 'package:flutter/material.dart';//StatelessWidget 所需要的包

void main() => runApp(MyApp());//app程序主入口,调用class MyApp

class MyApp extends StatelessWidget {//widget树,最外层使用StatelessWidget 
  @override
  Widget build(BuildContext context) {//类似android的onCreate
    return MaterialApp(//一个flutter官方提供好的简单的widget 包含脚部头部元素
      title: 'Welcome to Flutter',//
      home: new Text("hello world"),
    );
  }
}

以上就是一个普通的flutter StatelessWidget 例子

MaterialApp和Scaffold

MaterialApp:

上面的代码出现了MaterialApp这个类,这个类是flutter官方为了快速开发已经帮忙封装好的一个类
原文如下

/// An application that uses material design.
///
/// A convenience widget that wraps a number of widgets that are commonly
/// required for material design applications. It builds upon a [WidgetsApp] by
/// adding material-design specific functionality, such as [AnimatedTheme] and
/// [GridPaper].

大体意思是,一个封装了平常会在application中经常用到的素材的小组件 并且在material-design(设计的页面)时构建了一个WidgetsApp(有了这个东西才能构建widget树???)

Scaffold

这个是一个最基础的封装的继承于StatefulWidget的组件。
原文如下

/// Implements the basic material design visual layout structure.
///
/// This class provides APIs for showing drawers, snack bars, and bottom sheets.
///

大体意思是,一个最基本的设计页面,这个类可以帮助,drawers,bars,bottom sheets提供Api

区别

首先,在flutter中,万物皆为widget(可以想成java的object)
MaterialApp 是一个Application,封装了 material design(可以理解为页面设计)所需要的widget
Scaffold是一个有着一些基础封装的 StatefulWidget 是用来做一些头布局,脚布局等等的容器

-----------------以下是我的思路过程,可以跳过

在最一开始学习的时候,我感觉MaterialApp和Scaffold差不多,直到报了如下错误

image.png

后来查了些资料,再返回头看这段错误,然后得出大体如下的分析
首先,错误大体上说在执行 MediaQuery.of的时候使用的context不能创建MediaQuery
而官方中MediaQuery类是用来构建树(在这里应该指的是widget树)用的。


image.png

后面错误指出


image.png

错误指明了两个信息
1 若当前widget树中没有一个 widgetsApp或者 MaterialApp 是不能使用MediaQuery.of的
2MediaQuery.of所调用的context是 不能来自于 类似 Scaffold的widget
所以我目前的理解是 MaterialApp 是个widgetsApp 在android中可以想象成application类
Scaffold是个StatefulWidget 在android中可以想象是一个groupLayout

可以打个类似的比方来理解上面报错:
在application没有初始化的情况下,直接使用groupLayout的context一定会报错

-----------------思路结束

总结

大体上认识了MaterialApp是什么,StatelessWidget和StatefulWidget 区别,MaterialApp和Scaffold的区别

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

推荐阅读更多精彩内容