Flutter控件——容器控件：Scaffold

Posted 2022-06-18 wzj_what_why_how

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,
    ...  
  )