flutter仿微信我的模块：

遇到的问题是：我的模块中 底色是灰色，下拉过程中 上部分 露出的部分要求还是白色：

效果如下图：

• 其他模块下拉过程中显示 底色
• 我的模块中下拉显示的底色 为白色

 实现逻辑：使用 CustomScrollView 嵌套  SliverAppBar

CustomScrollView

 完整代码：

import 'package:flutter/material.dart';
import 'package:imflutter/wrap/extension/extension.dart';
import 'package:imflutter/wrap/widget/app_widget.dart';

import '../../const/app_colors.dart';
import '../../const/app_textStyle.dart';

GlobalKey<State> globalKeyTabBar3 = GlobalKey();

class TabBar3 extends StatefulWidget {
  const TabBar3({Key? key}) : super(key: key);

  @override
  State<TabBar3> createState() => _TabBar3State();
}

class _TabBar3State extends State<TabBar3> {
  final List<Map> _topOptions = [
    {'icon': 'assets/common/ic_pay.png', 'title': '服务'},
    {'icon': 'assets/common/ic_setting.png', 'title': '设置'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.colorEDEDED,
      body: CustomScrollView(
        physics: const BouncingScrollPhysics(
          parent: AlwaysScrollableScrollPhysics(),
        ),
        slivers: [
          SliverAppBar(
            expandedHeight: 0.cale,
            centerTitle: true,
            floating: true,
            pinned: false,
            snap: false,
            stretch: true,
            primary: false,
            shadowColor: Colors.transparent,
            backgroundColor: Colors.white,
            // onStretchTrigger: () async {
            //   print('onStretchTrigger');
            //   return;
            // },
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(
                  color: Colors.white,
                  child: Column(
                    children: [
                      SizedBox(
                        height: 40.cale,
                      ),
                      _topContent(),
                      SizedBox(
                        height: 88.cale,
                      ),
                    ],
                  ),
                ),
                ..._midContent(),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _topContent() {
    return Row(
      children: [
        Padding(
          padding: EdgeInsets.only(
            left: 45.cale,
            right: 30.cale,
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(7.cale),
            child: AppWidget.cachedImage(
              'https://user-info-1302720239.cos.ap-nanjing.myqcloud.com/userIcon/user_icon_000100.jpg?imageView2/1/w/80/h/80/q/66',
              width: 116.cale,
              height: 116.cale,
            ),
          ),
        ),
        SizedBox(
          height: 100.cale,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '这是昵称',
                style: AppTextStyle.textStyle_34_000000_Bold,
              ),
              Row(
                children: [
                  Text(
                    '微信号: ',
                    style: AppTextStyle.textStyle_28_7E7E7E,
                  ),
                  Text(
                    'angelporthome',
                    style: AppTextStyle.textStyle_28_636363,
                  ),
                ],
              )
            ],
          ),
        ),
        Spacer(),
        Container(
          height: 100.cale,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Padding(
                padding: EdgeInsets.only(right: 30.cale),
                child: Icon(
                  Icons.qr_code_sharp,
                  size: 35.cale,
                  color: AppColor.color636363,
                ),
              ),
              Padding(
                padding: EdgeInsets.only(right: 30.cale),
                child: Icon(
                  Icons.arrow_forward_ios,
                  size: 35.cale,
                  color: AppColor.colorB5B5B5,
                ),
              )
            ],
          ),
        )
      ],
    );
  }

  List<Widget> _midContent() {
    return _topOptions
        .map(
          (e) => Container(
            height: 120.cale,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                top: BorderSide(
                  width: 20.cale,
                  color: AppColor.colorEDEDED,
                ),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsets.only(left: 30.cale, right: 30.cale),
                  child: Image.asset(
                    e['icon'],
                    width: 50.cale,
                    height: 50.cale,
                  ),
                ),
                Text(
                  e['title'],
                  style: AppTextStyle.textStyle_30_000000,
                ),
                const Spacer(),
                Padding(
                  padding: EdgeInsets.only(right: 30.cale),
                  child: Icon(
                    Icons.arrow_forward_ios,
                    size: 35.cale,
                    color: AppColor.colorB5B5B5,
                  ),
                )
              ],
            ),
          ),
        )
        .toList();
  }
}