从零开始学习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的区别