（2.3）Flutter之容器组件

一、Scaffold

1.1 构造函数：

const Scaffold({
    Key? key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.onDrawerChanged,
    this.endDrawer,
    this.onEndDrawerChanged,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
    this.restorationId,
  })

1.2 主要参数说明：

appBar：顶部导航栏
body：页面内容
loatingActionButton：悬浮按钮
floatingActionButtonLocation：悬浮按钮位置
floatingActionButtonAnimator：悬浮按钮动画
persistentFooterButtons：显示在底部导航条上方的一组按钮
drawer：左侧菜单
onDrawerChanged：左侧抽屉菜单改变事件回调
endDrawer：右侧菜单
onEndDrawerChanged：右侧抽屉菜单改变事件回调
bottomNavigationBar：底部导航条
bottomSheet：持久在body下方，底部控件上方的控件
backgroundColor：背景颜色
resizeToAvoidBottomInset：防止小组件重复
primary：是否在屏幕顶部显示Appbar, 默认为 true，Appbar 是否向上延伸到状态栏，如电池电量，时间那一栏
drawerDragStartBehavior：检测手势行为方式，与drawer配合使用
extendBody：是否延伸到底部
extendBodyBehindAppBar：是否延伸到顶部，用于做半透明、毛玻璃效果的主要控制属性
drawerScrimColor：侧边栏弹出时非遮盖层主页面的颜色
drawerEdgeDragWidth：侧边栏弹出时非遮罩层的宽度
drawerEnableOpenDragGesture：左侧抽屉是否支持手势滑动
endDrawerEnableOpenDragGesture：右侧抽屉是否支持手势滑动
restorationId：状态还原标识符

1.3 代码示例：

1.4 显示效果：

二、Container

2.1 构造函数：

Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

2.2 主要参数说明：

alignment：容器内子组件的对齐方式
padding：容器的内边距
color：背景颜色
decoration：容器背景装饰 ，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。
foregroundDecoration：容器前景装饰
width：宽度
height：高度
constraints：容器的约束条件
margin：容器的外边距
transform：变换
child：容器的子组件
clipBehavior：裁剪方式

BoxDecoration的参数如下：

const BoxDecoration({
    this.color, //颜色，会和Container中的color属性冲突
    this.image, //背景图片
    this.border, //边框，对应类型是Border类型，里面每一个边框使用BorderSide
    this.borderRadius, //圆角效果
    this.boxShadow, //阴影效果
    this.gradient, //渐变效果
    this.backgroundBlendMode, //背景混合
    this.shape = BoxShape.rectangle, //形变
  })

2.3 代码示例：

1.4 显示效果：

三、Padding

Padding可以给其子节点添加填充（留白），和边距效果类似。

3.1 构造函数：

const Padding({
    Key? key,
    required this.padding,
    Widget? child,
  })

3.2 主要参数说明：

padding：EdgeInsetsGeometry类型（抽象类），使用EdgeInsets
child：子组件

EdgeInsets提供的便捷方法：
fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。
all(double value) : 所有方向均使用相同数值的填充。
only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。

3.3 代码示例：

3.4 显示效果：

四、Clip

4.1 构造函数：

const ClipOval({
    Key? key, 
    this.clipper, 
    this.clipBehavior = Clip.antiAlias, 
    Widget? child,
 })
const ClipRRect({
    Key? key,
    this.borderRadius = BorderRadius.zero,
    this.clipper,
    this.clipBehavior = Clip.antiAlias,
    Widget? child,
  })
const ClipRect({ 
    Key? key, 
    this.clipper, 
    this.clipBehavior = Clip.hardEdge, 
    Widget? child,
 })

4.2 主要参数说明：

clipper：参数定义裁剪规则。
clipBehavior：参数定义了裁剪的方式，只有子控件超出父控件的范围才有裁剪的说法，各个方式说明如下：

none：不裁剪，系统默认值，如果子组件不超出边界，此值没有任何性能消耗。
hardEdge：裁剪但不应用抗锯齿，速度比none慢一点，但比其他方式快。
antiAlias：裁剪而且抗锯齿，此方式看起来更平滑，比antiAliasWithSaveLayer快，比hardEdge慢，通常用于处理圆形和弧形裁剪。
antiAliasWithSaveLayer：裁剪、抗锯齿而且有一个缓冲区，此方式很慢，用到的情况比较少。

child：子组件。

4.3 代码示例：

4.4 显示效果：