flutter 常见组件的特殊用法 —— SliverAppBar

SliverAppBar 的组成

特殊属性说明

primary: true

不同于 AppBar 通常有 Scaffold 包裹，其最大高度由父类约束。SliverAppBar 完全由自身决定。
当 primary 等于 true 时，其 topPadding 等于状态栏高度；若为 false，则 topPadding 等于 0，并且整体高度也会缩小（减去状态栏高度）。

collapsedHeight

最小高度由3部分组成：状态栏高度 + 传入的 collapsedHeight 高度 + 底栏高度。

当 collapsedHeight 为空时，默认等于工具栏高度，除非当前配置为 固定、悬浮并且底栏不为空，则默认等于 0。

相关源码：

final double collapsedHeight = (widget.pinned && widget.floating && widget.bottom != null)
    ? (widget.collapsedHeight ?? 0.0) + bottomHeight + topPadding
    : (widget.collapsedHeight ?? widget.toolbarHeight) + bottomHeight + topPadding;

//...

@override
double get minExtent => collapsedHeight;

expandedHeight

最大高度，其值最小为 collapsedHeight，否则等于 状态栏高度 + 传入的 expandedHeight 高度 + 底栏高度。

当 expandedHeight 为空时，默认等于工具栏高度。

相关源码：

  @override
  double get maxExtent => math.max(topPadding + (expandedHeight ?? (toolbarHeight ?? kToolbarHeight) + _bottomHeight), minExtent);

源码

整体简单看下源码：

@override
Widget build(BuildContext context) {
  assert(!widget.primary || debugCheckHasMediaQuery(context));
  final double bottomHeight = widget.bottom?.preferredSize.height ?? 0.0;
  // 若 primary 属性为 false，则 topPadding 等于 0，且整体高度缩小。
  // 注：跟 AppBar 不同，AppBar 外层由 Scaffold 包裹，其最大高度没有改变，只是整体向上移了。
  final double topPadding = widget.primary ? MediaQuery.of(context).padding.top : 0.0;
  // 最小高度 minExtent = 状态栏高度 + 传入的 collapsedHeight 高度 + 底栏高度
  final double collapsedHeight = (widget.pinned && widget.floating && widget.bottom != null)
      ? (widget.collapsedHeight ?? 0.0) + bottomHeight + topPadding
      : (widget.collapsedHeight ?? widget.toolbarHeight) + bottomHeight + topPadding;

  return MediaQuery.removePadding(
    context: context,
    removeBottom: true,
    // SliverPersistentHeader 用于实现固定、悬浮等效果
    child: SliverPersistentHeader(
      floating: widget.floating,
      pinned: widget.pinned,
      delegate: _SliverAppBarDelegate(
        vsync: this,
        leading: widget.leading,
        automaticallyImplyLeading: widget.automaticallyImplyLeading,
        title: widget.title,
        actions: widget.actions,
        flexibleSpace: widget.flexibleSpace,
        bottom: widget.bottom,
        elevation: widget.elevation,
        scrolledUnderElevation: widget.scrolledUnderElevation,
        shadowColor: widget.shadowColor,
        surfaceTintColor: widget.surfaceTintColor,
        forceElevated: widget.forceElevated,
        backgroundColor: widget.backgroundColor,
        foregroundColor: widget.foregroundColor,
        brightness: widget.brightness,
        iconTheme: widget.iconTheme,
        actionsIconTheme: widget.actionsIconTheme,
        textTheme: widget.textTheme,
        primary: widget.primary,
        centerTitle: widget.centerTitle,
        excludeHeaderSemantics: widget.excludeHeaderSemantics,
        titleSpacing: widget.titleSpacing,
        expandedHeight: widget.expandedHeight,
        collapsedHeight: collapsedHeight,
        topPadding: topPadding,
        floating: widget.floating,
        pinned: widget.pinned,
        shape: widget.shape,
        snapConfiguration: _snapConfiguration,
        stretchConfiguration: _stretchConfiguration,
        showOnScreenConfiguration: _showOnScreenConfiguration,
        toolbarHeight: widget.toolbarHeight,
        leadingWidth: widget.leadingWidth,
        backwardsCompatibility: widget.backwardsCompatibility,
        toolbarTextStyle: widget.toolbarTextStyle,
        titleTextStyle: widget.titleTextStyle,
        systemOverlayStyle: widget.systemOverlayStyle,
      ),
    ),
  );
}