Flutter控件——容器控件:Scaffold

Posted wzj_what_why_how

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter控件——容器控件:Scaffold相关的知识,希望对你有一定的参考价值。

Scaffold

Scaffold.dart 源码

class Scaffold extends StatefulWidget 
  /// Creates a visual scaffold for material design widgets.
  const Scaffold(
    Key? key,
    this.appBar,   //页面上方导航条  AppBar(title: Text("主体页面标题的bar title"),)
    this.body,  //页面容器
    this.floatingActionButton,  //悬浮按钮
    this.floatingActionButtonLocation,  //悬浮按钮位置
    this.floatingActionButtonAnimator,  //悬浮按钮动画
    this.persistentFooterButtons,  //显示在底部导航条上方的一组按钮
    this.drawer,  //左侧菜单
    this.onDrawerChanged,  //
    this.endDrawer,  //右侧菜单
    this.onEndDrawerChanged,  //
    this.bottomNavigationBar,  //底部导航条
    this.bottomSheet,  // 一个持久停留在body下方,底部控件上方的控件
    this.backgroundColor,  // 背景色
    this.resizeToAvoidBottomInset,  //默认为 true,防止一些小组件重复
    this.primary = true,  // 是否在屏幕顶部显示Appbar, 默认为 true,Appbar 是否向上延伸到状态栏,如电池电量,时间那一栏
    this.drawerDragStartBehavior = DragStartBehavior.start,  // 控制 drawer 的一些特性
    this.extendBody = false,  //  body 是否延伸到底部控件
    this.extendBodyBehindAppBar = false,  // 默认 false,为 true 时,body 会置顶到 appbar 后,如appbar 为半透明色,可以有毛玻璃效果
    this.drawerScrimColor,  // 侧滑栏拉出来时,用来遮盖主页面的颜色
    this.drawerEdgeDragWidth,  // 侧滑栏拉出来的宽度
    this.drawerEnableOpenDragGesture = true,  // 左侧侧滑栏是否可以滑动
    this.endDrawerEnableOpenDragGesture = true,  // 右侧侧滑栏是否可以滑动
    this.restorationId,  //
  )

ps:参数中一般只用到了 appBar; body 。


AppBar

AppBar是一个Material风格的导航栏,通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等。下面我们看看AppBar的定义:

  AppBar(
    Key? key,
    this.leading, //导航栏最左侧Widget,常见为抽屉菜单按钮或返回按钮。
    this.automaticallyImplyLeading = true, //如果leading为null,是否自动实现默认的leading按钮
    this.title,// 页面标题
    this.actions, // 导航栏右侧菜单
    this.bottom, // 导航栏底部菜单,通常为Tab按钮组
    this.elevation = 4.0, // 导航栏阴影
    this.centerTitle, //标题是否居中
    this.backgroundColor,
    ...  
  )

以上是关于Flutter控件——容器控件:Scaffold的主要内容,如果未能解决你的问题,请参考以下文章

Flutter 之 Sliver 系列控件

Flutter控件——容器控件:装饰容器 DecoratedBox

Flutter控件——容器控件:装饰容器 DecoratedBox

Flutter控件——容器控件:变换Transform

Flutter控件——容器控件:变换Transform

Flutter控件——容器控件:变换Transform