Flutter SliverAppBar属性详解

最新推荐文章于 2025-02-03 21:15:00 发布

怀旧的老张

最新推荐文章于 2025-02-03 21:15:00 发布

阅读量2.9k

点赞数

分类专栏： flutter 文章标签：前端 flutter android ios

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Zhang_Teng/article/details/108830648

版权

flutter 专栏收录该内容

11 篇文章

订阅专栏

本文详细探讨了Flutter中的SliverAppBar组件及其属性，同时深入解析了FlexibleSpaceBar的相关设置，对于移动端开发者，尤其是关注前端、Flutter、Android和iOS平台的开发者，提供了SliverAppBar在实际应用中的关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SliverAppBar属性

   const SliverAppBar({
    Key key,
    this.leading,  //左侧控件 通常是个返回按钮

        // 如果没有leading，automaticallyImplyLeading为true，就会默认返回箭头
        // 如果 没有leading 且为false，空间留给title
        // 如果有leading，这个参数就无效了 默认为 true
    this.automaticallyImplyLeading = false,

        //标题 接收 widget 一般为 text
    this.title,

        //右侧控件组
    this.actions,
    this.bottom,//底部控件 例如通常是个 tabBar

    this.flexibleSpace, //展开折叠的区域 通常使用 FlexibleSpaceBar

    this.expandedHeight,//展开的高度

    this.elevation,//阴影
    this.shadowColor,//阴影颜色
    this.forceElevated = false, //是否显示阴影
    this.backgroundColor,//背景颜色

    this.brightness,// 应用栏材质的亮度

    this.iconTheme,//icon样式
    this.actionsIconTheme,//actionsIcon样式
    this.textTheme, //字体样式

    //appbar是否浸入状态栏，为false是为浸入，为true就显示在状态栏的下面
    this.primary = true,

    this.centerTitle,//标题是否居中

    this.excludeHeaderSemantics = false,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing, //标题间距

    this.collapsedHeight,//折叠之后的高度 默认 toolbarHeight 的高度



        //是否应该在用户滚动时变得可见 比如pinned 为false可滑出屏幕 当向下滑时可先滑出 状态栏
    this.floating = false,

        //appBar是否置顶 是否固定在顶部 为true是固定，为false是不固定可滑出屏幕
    this.pinned = false,
        //当手指放开时，SliverAppBar是否会根据当前的位置展开/收起
    this.snap = false,

        
        
    //拉伸一般会设置 FlexibleSpaceBar 的stretchModes 使用
    this.stretch = false, //是否可拉伸伸展
    this.stretchTriggerOffset = 100.0, //触发拉伸偏移量
    this.onStretchTrigger,//拉伸监听
    this.shape,
    this.toolbarHeight = kToolbarHeight,
  })

FlexibleSpaceBar属性

const FlexibleSpaceBar({
    Key key,
    this.title, //标题 同样接收的是Widget 固不局限于Text 此处设置的标题会根据 拉伸量移动 在SliverAppbar 设置的标题 不会移动
    this.background,//背景
    this.centerTitle,//是否居中
    this.titlePadding,//标题Padding

    this.collapseMode = CollapseMode.parallax, //折叠模式 = parallax pin none

      //StretchMode.zoomBackground- >背景小部件将展开以填充额外的空间。
      // StretchMode.blurBackground- >使用[ImageFilter.blur]效果，背景将模糊。
      // StretchMode.fadeTitle- >随着用户过度滚动，标题将消失。
    this.stretchModes = const <StretchMode>[StretchMode.zoomBackground],