SliverAppBar 底部标题和 Tabbar 空间折叠时，标题未完全折叠

Question

我只想构建一个带有标题和底部标签栏的简单 SliverAppBar 但由于我需要降低标签栏高度我使用 preferredsize 然后它看起来像这样，标题不会完全折叠，我想固定标签栏但标题没有'倒塌

SliverAppBar(
      iconTheme: const IconThemeData(color: Colors.white),
      backgroundColor: Colors.transparent,
      elevation: 0,
      floating: true,
      snap: true,
      pinned: true,
      automaticallyImplyLeading: false,
      title: const Text(
        'LIVE',
        style: TextStyle(color: MyThemes.colorWhite),
      ),
      actions: [
        IconButton(
          onPressed: () {},
          icon: Image.asset(
            'assets/icons/general/icon-search.png',
            width: 16,
            height: 16,
          ),
        ),
      ],
      flexibleSpace: FlexibleSpaceBar(
        background: Container(
          decoration: const BoxDecoration(
            color: Colors.red,
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Colors.black, Colors.transparent],
            ),
          ),
        ),
      ),
      bottom: PreferredSize(
           preferredSize: const Size.fromHeight(kToolbarHeight),
        child: SizedBox(
          height: 36,
          child: TabBar(
            overlayColor: MaterialStateProperty.all(Colors.transparent),
            indicatorPadding: EdgeInsets.zero,
            indicator: const ShapeDecoration(
              shape: StadiumBorder(),
              color: MyThemes.colorBlue,
            ),
            isScrollable: true,
            tabs: const [
              Tab(text: 'Layar Hiburan'),
              Tab(text: 'Layar Berita'),
            ],
          ),
        ),
      ),
    );

Answer 1

您可以将另一个 SliverAppBar 用于 TabBar 而不是首先使用 SliverAppBar 的 bottom 属性。像这样 ：

Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          // This is our 1st SliverAppBar for 'LIVE' title,
          SliverAppBar(
            iconTheme: const IconThemeData(color: Colors.white),
            backgroundColor: Colors.transparent,
            elevation: 0,
            floating: true,
            snap: false,
            pinned: false,
            automaticallyImplyLeading: false,
            title: const Text(
              'LIVE',
              style: TextStyle(color: Colors.white),
            ),
            actions: [
              IconButton(
                onPressed: () {},
                icon: Image.asset(
                  'assets/icons/general/icon-search.png',
                  width: 16,
                  height: 16,
                ),
              ),
            ],
            flexibleSpace: FlexibleSpaceBar(
              background: Container(
                decoration: const BoxDecoration(
                  color: Colors.red,
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.black, Colors.black],
                  ),
                ),
              ),
            ),
          ),
          // This is our 2nd SliverAppBar for TabBar widget.
          SliverAppBar(
            iconTheme: const IconThemeData(color: Colors.white),
            backgroundColor: Colors.transparent,
            elevation: 0,
            floating: false,
            snap: false,
            pinned: true,
            automaticallyImplyLeading: false,
            flexibleSpace: FlexibleSpaceBar(
              background: Container(
                decoration: const BoxDecoration(
                  color: Colors.red,
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.black, Colors.black],
                  ),
                ),
                child: Center(
                  child: TabBar(
                    overlayColor: MaterialStateProperty.all(Colors.transparent),
                    indicatorPadding: EdgeInsets.zero,
                    controller: _tabController,
                    indicator: const ShapeDecoration(
                      shape: StadiumBorder(),
                      color: Colors.blue,
                    ),
                    isScrollable: true,
                    tabs: const [
                      Tab(text: 'Layar Hiburan'),
                      Tab(text: 'Layar Berita'),
                    ],
                  ),
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  color: index.isOdd ? Colors.white : Colors.black12,
                  height: 100.0,
                  child: Center(
                    child: Text('$index', textScaleFactor: 5),
                  ),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }