Flutter：吸顶效果

在分页中，实现tab吸顶。
TDNavBar的screenAdaptation: true, 开启屏幕适配。
该属性已自动对不同手机状态栏高度进行适配。我们只需关注如何实现吸顶。

view

import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:xiaoshukeji/common/index.dart';

import 'index.dart';

// 1. SliverPersistentHeaderDelegate：必须实现的抽象类
class _StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
   
  final Widget child;

  _StickyTabBarDelegate({
   required this.child});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
   
    // shrinkOffset: 滚动距离
    // overlapsContent: 是否与其他内容重叠
    return Container(
      color: AppTheme.pageBgColor,
      child: child,
    );
  }

  @override
  double get maxExtent => 92.w; // 最大高度，已知tab高度72+上下padding：10

  @override
  double get minExtent => 92.w; // 最小高度

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => true;
}


class RankingPage extends GetView<RankingController> {
   
  const RankingPage({
   super.key});

  // 头部皇冠位置
  Widget _buildHeader() {
   
    return <Widget>[

    ].toRow()
    .card(color: AppTheme.pageBgColor)
    .tight(width: 750.w,height: 300.w,);
  }

  // tab，可吸顶
  Widget _buildTab() {
   
    return <Widget>[
      <Widget>[
        TextWidget.body('日榜', size: 28.sp, weight: FontWeight.w600, color: AppTheme.textColorfff),
      ].toRow(mainAxisAlignment: MainAxisAlignment.center)
      .card(color: AppTheme.primar