持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情
- FlutterLogo
- Placeholder 组件（占位）
- Container（容器）
FlutterLogo（少用）
FlutterLogo组件就是一个专门用于渲染Flutter徽标的组件。项目比较少用，用于Flutter演示或者宣传介绍Flutter的时候
FlutterLogo(
size: 100, // 尺寸，默认24，单位是逻辑像素
style: FlutterLogoStyle. stacked,
)
Flutter框架中的尺寸或者位置信息，例如高度、宽度等一般都以逻辑像素作为单位
什么是逻辑像素？
大家一定非常熟悉像素的概念，即屏幕上一个个可以独立显示颜色的小点。例如在一块1920×1080像素的分辨率的屏幕上，水平方向有1920像素，垂直方向有1080像素。通过简单地相乘，可以得出这块屏幕约有200万像素。
随着屏幕制造工艺的改进和科技的发展，电子设备的分辨率越来越高，呈现出的画面越来越细腻，同时屏幕上的每个物理像素也变得越来越小。在同样的6英寸屏幕上，部分手机屏幕只有200万像素，但也有一些手机屏幕则会用到800万像素甚至更多。
由于每个物理像素的规格不同，在界面设计时像素不再是一种合理的单位。例如若将一个按钮的宽度设置为500像素，则在老式或低端的屏幕上或许能占5cm，但在高清屏幕上由于像素密度高，500像素可能只占不到2cm，因此，Flutter框架使用比较现代的“逻辑像素”概念，相当于安卓原生开发里的displaypixel单位，或iOS原生开发里的CGPoint概念。运行时，Flutter程序会根据当前的设备信息自动提供逻辑像素到物理像素的转换，最终提供统一的“每38像素约为1cm”或“每英寸约96像素”的接口[插图]。这样开发者在处理页面布局时，就不需要考虑不同设备屏幕的像素密度了。
Placeholder 组件（占位）
Placeholder（占位），顾名思义就是有该模块还未实现，但是需要在屏幕布局上留下适当的空间。
这个组件一般不传任何参数就可以应付大多场景。一般会占满全部可用空间的。
Placeholder()
Container 组件
Container（容器），Container组件就是这样一个结合了定义尺寸、形状、背景颜色、间距、留白、装饰等多功能于一身的组件。虽然这些功能都有对应的组件，但是初学者套用Container是最简便和易记，后续熟悉之后适当使用能有助于缩短代码量同时增加可读性。
Container( width: 200, height: 100, color: Colors.grey, )
- 嵌套子组件
除了绘制图形之外，Container组件更长用于包装和修饰其他组件。借助其child参数传入另一个组件，以达成嵌套的效果。【这里需要注意的是，如果嵌套的子组件的尺寸小于这个Container组件，则还需要通过传入alignment（对齐）属性设置内部的小组件应该怎样摆放，如居中、左上、右下等。如果没有传入alignment参数，则Container组件不会自动把child居中，而是会将child设置为自身尺寸。】
实战：最外层框灰底位置左上 中间黑底位置中下 最内层白色位置居中
- 常用属性
1. width和height
宽高，类型为double，默认值为null，单位逻辑像素。若Container组件只被设置尺寸，没有其他功能（填充色或修饰属性等），可以考虑用SizedBox组件
2.color
填充色，类型为Color，当值为null则为透明，没有填充小效果。例如：Colors.blue，Colors. red. withOpacity（0.5）
3.child
子组件，类型为Widget。如果不传入且没有定义Container组件尺寸，则Container会尽量占满父级组件的全部空间。Container组件只支持嵌套一个子组件，如果需要传入多个组件，则可考虑使用Column、Row或Stack组件。
4.alignment
alignment 对齐，使用该属性设置对齐方式，类型为Alignment类构,造函数为Alignment（double x，double y），取值范围是[-1.0,1.0]。0.0则表示坐落于正中间
| -1.0 | 1.0 | |
|---|---|---|
| 横轴 | 最左边 | 最右边 |
| 纵轴 | 最顶部 | 最底部 |
5.margin和padding
间距留白和填充留白。类型为EdgeInsets类。三种写法。以padding为例子
padding: const EdgeInsets.fromLTRB(16.0,16.0,16.0,16.0) // 左上右下
padding: EdgeInsets.all(16.0) // 上下左右各添加16像素补白
padding: EdgeInsets.only(left: 16.0, top: 16.0, right: 16.0, bottom: 16.0) // 不一定都写，想设哪个就设哪个
之后类似的都是读书笔记，这里是《Flutter组件详解与实践》 王浩然
