Flutter实现三状态切换AppBar及背景图上可拉伸内容方案

问题描述 #

• 需实现特定UI效果，当前面临两个核心问题：
  1. 自定义AppBar需支持3种视觉状态，要求达到指定滚动偏移量时立即切换状态，无滚动渐变效果；
  2. 顶部背景图上的内容滚动至底部时，需完全覆盖背景图，避免露出背景区域。

现有代码 #

@override
Widget build(BuildContext context) {
  return ScaffoldPF(
    backgroundColor: context.colors.colorOnBase,
    body: BlocConsumer<ClubPublicPortfolioBloc, ClubPublicPortfolioState>(
      listener: (context, state) => switch (state) {
        ClubPublicPortfolioData() => _handleData(state.portfolios),
        _ => null,
      },
      builder: (context, state) => switch (state) {
        ClubPublicPortfolioInitial() => const IdeasPortfolioSkeleton(),
        ClubPublicPortfolioData() => Stack(
            children: [
              Positioned.fill(
                child: Assets.club.portfolioBg.image(
                  fit: BoxFit.cover,
                ),
              ),
              CustomScrollView(
                controller: _scrollController,
                slivers: [
                  const SliverToBoxAdapter(
                    child: SizedBox(height: 90),
                  ),
                  SliverToBoxAdapter(
                    child: PortfolioHeader(
                      portfolio: widget.portfolio ?? state.portfolios.first,
                    ),
                  ),

                  const SliverToBoxAdapter(child: SizedBox(height: 24)),

                  /// Trades table.
                  SliverFillRemaining(
                    hasScrollBody: false,
                    fillOverscroll: true,
                    child: Container(
                      padding: const EdgeInsets.only(top: 16),
                      decoration: BoxDecoration(
                        color: context.colors.colorOnBase,
                        borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(16),
                          topRight: Radius.circular(16),
                        ),
                      ),
                      child: const TradesTableSection(),
                    ),
                  ),
                ],
              ),
            ],
          ),
      },
    ),
  );
}

问题1：多状态切换的自定义AppBar #

实现思路 #

通过监听滚动控制器的偏移量，设定明确的阈值来切换AppBar状态，利用setState立即更新UI，避免渐变过渡。

代码实现步骤 #

1. 初始化滚动监听：在initState中为_scrollController添加滚动回调：

@override
void initState() {
  super.initState();
  _scrollController.addListener(_onScroll);
}

2. 定义状态与阈值：创建枚举管理AppBar状态，在回调中根据偏移量匹配状态：

enum AppBarState { initial, middle, collapsed }
AppBarState _currentAppBarState = AppBarState.initial;

void _onScroll() {
  final offset = _scrollController.offset;
  AppBarState newState;
  
  // 根据UI需求调整阈值数值
  if (offset < 120) {
    newState = AppBarState.initial;
  } else if (offset < 240) {
    newState = AppBarState.middle;
  } else {
    newState = AppBarState.collapsed;
  }

  if (newState != _currentAppBarState) {
    setState(() => _currentAppBarState = newState);
  }
}

3. 构建多状态AppBar：根据当前状态渲染对应样式：

Widget _buildCustomAppBar() {
  switch (_currentAppBarState) {
    case AppBarState.initial:
      return AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        // 初始状态下的其他UI配置
      );
    case AppBarState.middle:
      return AppBar(
        backgroundColor: Colors.blue[200],
        elevation: 2,
        // 中间状态下的其他UI配置
      );
    case AppBarState.collapsed:
      return AppBar(
        backgroundColor: Colors.blue,
        elevation: 4,
        // 折叠状态下的其他UI配置
      );
  }
}

4. 将AppBar整合到页面：在ScaffoldPF中添加自定义AppBar：

return ScaffoldPF(
  appBar: _buildCustomAppBar(),
  // 原有body内容...
);

问题2：内容滚动到底部覆盖背景图 #

实现思路 #

将背景图与顶部头部整合为SliverPersistentHeader，让背景随滚动联动，同时调整SliverFillRemaining属性确保底部内容高度足够覆盖背景。

代码修改 #

1. 自定义PersistentHeaderDelegate：

class _PortfolioHeaderDelegate extends SliverPersistentHeaderDelegate {
  final Portfolio portfolio;

  _PortfolioHeaderDelegate({required this.portfolio});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Stack(
      fit: StackFit.expand,
      children: [
        Assets.club.portfolioBg.image(fit: BoxFit.cover),
        PortfolioHeader(portfolio: portfolio),
      ],
    );
  }

  @override
  double get maxExtent => 320; // 根据UI需求设定头部最大高度
  @override
  double get minExtent => 0;
  @override
  bool shouldRebuild(_PortfolioHeaderDelegate oldDelegate) => oldDelegate.portfolio != portfolio;
}

2. 调整CustomScrollView结构：

CustomScrollView(
  controller: _scrollController,
  slivers: [
    SliverPersistentHeader(
      delegate: _PortfolioHeaderDelegate(
        portfolio: widget.portfolio ?? state.portfolios.first,
      ),
      pinned: false,
    ),
    const SliverToBoxAdapter(child: SizedBox(height: 24)),
    SliverFillRemaining(
      hasScrollBody: true, // 允许内容滚动，确保高度足够覆盖背景
      fillOverscroll: true,
      child: Container(
        padding: const EdgeInsets.only(top: 16),
        decoration: BoxDecoration(
          color: context.colors.colorOnBase,
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(16),
            topRight: Radius.circular(16),
          ),
        ),
        child: const TradesTableSection(),
      ),
    ),
  ],
)

内容的提问来源于stack exchange，提问作者arcthurus