关于flutter:Flutter-第九课组件之Scaffold和AppBar和Drawer和FloatingActionButton

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);