flutter - Tabbarview 子项在选项卡顶部滚动

Question

这是涉及持久的银色应用栏的代码

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin{
  final List<String> tabs = [
    StringConstants.tabFood,
    StringConstants.tabDrinks
  ];

  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: tabs.length, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: colorWhite,
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                elevation: 1,
                title: Text("text"),
                backgroundColor: colorWhite,
                iconTheme: IconThemeData(color: colorDarkGray),
                actionsIconTheme: IconThemeData(color: colorDarkGray),
                leading: RoundIconButton(
                    icon: Icons.arrow_back_sharp,
                    onPressed: () {
                      Navigator.pop(context);
                    }),
                actions: [
                  RoundIconButton(icon: Icons.search, onPressed: () {}),
                ],
                expandedHeight: 160.0,
                collapsedHeight: 60,
                floating: true,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  background: Container(
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Text(
                            "text",
                            style: textStyleTitle,
                          ),
                          Text(
                            "subtext",
                            style: textStyleSubTitle,
                          )
                        ],
                      ),
                    ),
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: NetworkImage("https://cdn.pixabay.com/photo/2017/08/02/14/26/winter-landscape-2571788_1280.jpg"),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
              ),
              SliverPersistentHeader(
                pinned: true,
                delegate: _SliverAppBarDelegate(
                  TabBar(
                    controller: _tabController,
                    indicatorColor: colorPrimary,
                    labelStyle: TextStyle(
                        fontFamily: "JosefinSans",
                        fontSize: 16,
                        fontWeight: FontWeight.bold),
                    labelColor: colorPrimary,
                    unselectedLabelColor: colorLightGray,
                    isScrollable: true,
                    tabs: [
                      for (final tab in tabs)
                        Tab(
                          text: tab,
                        ),
                    ],
                  ),
                ),
              ),
            ];
          },
          body: TabBarView(
            controller: _tabController,
            children: [
              for (final tab in tabs)
                Expanded(child: Container(
                  color: Colors.blue,
                )),
            ],
          ),
        ),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;

  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Padding(
      padding: const EdgeInsets.only(left: 20, right: 20),
      child: new Container(
        child: _tabBar,
      ),
    );
  }

容器的内容（在 tabbarview 中）在选项卡顶部滚动。我正在寻找的是它在标签后面滚动。我希望标签在应用栏下方保持不变，这可以正常工作。但唯一的问题是 tabbarview 的内容在选项卡的顶部滚动。一旦滚动开始，选项卡的背景就会变得透明

标签： flutterflutter-layoutflutter-sliverflutter-sliverappbar