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);
作者:Rocky_ruan原文地址:https://segmentfault.com/a/1190000042534790

%s 个评论

要回复文章请先登录注册