Flutter 学习第九课：Flutter 组件之 Scaffold 和组件 AppBar 和 Drawer 抽屉组件和组件 FloatingActionButton 悬浮框按钮
第一：Scaffold 介绍
Scaffold：翻译过去就是脚手架意思，Material Design 布局构造的根本实现。提供展现抽屉（drawers，比方：侧边栏）、告诉（snack bars）以及 底部按钮（bottom sheets）。
const Scaffold({
Key? key,
this.appBar,// 标题栏
this.body,// 用于显示以后界面次要内容的 Widget
this.floatingActionButton,// 一个悬浮在 body 上的按钮，默认显示在右下角
this.floatingActionButtonLocation,// 用于设置 floatingActionButton 显示的地位
this.floatingActionButtonAnimator,// floatingActionButton 挪动到一个新的地位时的动画
this.persistentFooterButtons,// 多状态按钮
this.drawer,// 左侧的抽屉菜单
this.onDrawerChanged,
this.endDrawer,// 右 ' 侧的抽屉菜单
this.onEndDrawerChanged,
this.bottomNavigationBar,// 底部导航栏。this.bottomSheet,// 显示在底部的工具栏
this.backgroundColor,// 内容的背景色彩
this.resizeToAvoidBottomInset,// 管制界面内容 body 是否从新布局来防止底部被笼罩，比方当键盘显示的时候，从新布局防止被键盘盖住内容
this.primary = true,// Scaffold 是否显示在页面的顶部
this.drawerDragStartBehavior = DragStartBehavior.start,// 管制 drawer 的一些个性
this.extendBody = false,//body 是否延长到底部控件
this.extendBodyBehindAppBar = false,
this.drawerScrimColor,// 侧滑栏拉进去时，用来遮蔽主页面的色彩
this.drawerEdgeDragWidth,// 侧滑栏拉进去的宽度
this.drawerEnableOpenDragGesture = true,// 左侧侧滑栏是否能够滑动
this.endDrawerEnableOpenDragGesture = true,// 右侧侧滑栏是否能够滑动
this.restorationId,
}) : assert(primary != null),
assert(extendBody != null),
assert(extendBodyBehindAppBar != null),
assert(drawerDragStartBehavior != null),
super(key: key);例如：栗子
/// 脚手架
return Scaffold(
appBar: AppBar(title: Text("Flutter Demo"),
),
body: Center(child: Text('Hello Flutter'),
),
floatingActionButton: FloatingActionButton(onPressed: () {},
child: Text('点击'),
),
drawer: Drawer(
child: Center(child: Text('Drawer'),
),
),
);第二：AppBar 详解
AppBar({
Key? key,
this.leading,////widget 类型，即可任意设计款式，示意左侧 leading 区域，通常为 icon，如返回 icon
this.automaticallyImplyLeading = true,//// 如果 leading!=null，该属性不失效；如果 leading==null 且为 true，左侧 leading 区域留白；如果 leading==null 且为 false，左侧 leading 区域扩大给 title 区域应用
this.title,//widget 类型，即可任意设计款式，示意两头 title 区域，通常为标题栏
this.actions,// List<Widget> 类型，即可任意设计款式，示意右侧 actions 区域，可搁置多个 widget，通常为 icon，如搜寻 icon、菜单 icon
this.flexibleSpace,
this.bottom,//PreferredSizeWidget 类型，appbar 底部区域，通常为 Tab 控件
this.elevation,// 暗影高度，默认为 4
this.shadowColor,
this.shape,//ShapeBorder 类型，示意描边形态
this.backgroundColor,//Color 类型，背景色
this.foregroundColor,
@Deprecated(
'This property is no longer used, please use systemOverlayStyle instead.'
'This feature was deprecated after v2.4.0-0.0.pre.',
)
this.brightness,
this.iconTheme,//IconThemeData 类型，可影响包含 leading、title、actions 中 icon 的色彩、透明度，及 leading 中的 icon 大小。this.actionsIconTheme,
@Deprecated(
'This property is no longer used, please use toolbarTextStyle and titleTextStyle instead.'
'This feature was deprecated after v2.4.0-0.0.pre.',
)
this.textTheme,
this.primary = true,
this.centerTitle,// boolean 类型，示意题目是否居中显示
this.excludeHeaderSemantics = false,
this.titleSpacing,
this.toolbarOpacity = 1.0,
this.bottomOpacity = 1.0,
this.toolbarHeight,
this.leadingWidth,
@Deprecated(
'This property is obsolete and is false by default.'
'This feature was deprecated after v2.4.0-0.0.pre.',
)
this.backwardsCompatibility,
this.toolbarTextStyle,
this.titleTextStyle,
this.systemOverlayStyle,
}) : assert(automaticallyImplyLeading != null),
assert(elevation == null || elevation >= 0.0),
assert(primary != null),
assert(toolbarOpacity != null),
assert(bottomOpacity != null),
preferredSize = _PreferredAppBarSize(toolbarHeight, bottom?.preferredSize.height),
super(key: key);actions
第三:Drawer 抽屉布局
const Drawer({
Key? key,
this.backgroundColor,// 背景色
this.elevation,// 暗影
this.shape,// 形态
this.child,
this.semanticLabel,
}) : assert(elevation == null || elevation >= 0.0),
super(key: key); 第四：组件 FloatingActionButton 悬浮框按钮
FloatingActionButton 是一个悬浮在屏幕上方的按钮，罕用于 Scaffold.floatingActionButton。
const FloatingActionButton({
Key? key,
this.child,// 子控件, 通常为 Icon
this.tooltip,// 长按时显示的提醒语
this.foregroundColor,//Icon 与 Text 色彩
this.backgroundColor,// 背景色
this.focusColor,// 聚焦色
this.hoverColor,// 悬浮色
this.splashColor,// 点击时的色彩
this.heroTag = const _DefaultHeroTag(),// 标记
this.elevation,// 暗影高度
this.focusElevation,// 聚焦时暗影高度
this.hoverElevation,// 悬浮时暗影高度
this.highlightElevation,// 高亮时暗影高度
this.disabledElevation,// 不可用时暗影高度
required this.onPressed,// 点击事件
this.mouseCursor,// 鼠标悬停，Web 能够理解
this.mini = false,// 默认 false，默认按钮为 56 * 56，当 mini 为 true 时，默认大小为 40 * 40，边框 padding 各为 4，所以布局大小为 48 * 48
this.shape,// 自定义形态
this.clipBehavior = Clip.none,// 边缘裁剪形式，默认为 Clip.none
this.focusNode,// 焦点节点，例如监听 focusNode 能够实现输入框的开始、完结输出
this.autofocus = false,// 主动聚焦，默认为 false
this.materialTapTargetSize,// 点击区域大小，MaterialTapTargetSize.padded 时最小点击区域为 48*48，MaterialTapTargetSize.shrinkWrap 时为子组件的理论大小。this.isExtended = false,// 默认为 false，当应用 extended 办法时为 true
this.enableFeedback,
}) : assert(elevation == null || elevation >= 0.0),
assert(focusElevation == null || focusElevation >= 0.0),
assert(hoverElevation == null || hoverElevation >= 0.0),
assert(highlightElevation == null || highlightElevation >= 0.0),
assert(disabledElevation == null || disabledElevation >= 0.0),
assert(mini != null),
assert(clipBehavior != null),
assert(isExtended != null),
assert(autofocus != null),
_floatingActionButtonType = mini ? _FloatingActionButtonType.small : _FloatingActionButtonType.regular,
_extendedLabel = null,
extendedIconLabelSpacing = null,
extendedPadding = null,
extendedTextStyle = null,
super(key: key);