带有 StickyHeader 的 Sliver 内的 TabBarView

Question

到目前为止，我已经使用 CustomScrollView 和 Sticky Header 制作了这个布局

https://imgur.com/a/Xo4AfAM

我想要实现的是选项卡下方的内容不应滚动，除非有额外的内容可用。此外，滚动后，内容不应位于置顶标题后面。

到目前为止我的代码。

Scaffold(
  backgroundColor: Colors.white,
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    toolbarHeight: getHeight() * (1 / 11),
  ),
  body: Padding(
    padding: getPaddings(),
    child: DefaultTabController(
      length: 3,
      child: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Container(
              height: getHeight() * (3 / 11),
              color: Colors.blue,
            ),
          ),
          SliverStickyHeader(
            header: Column(
              children: [
                Container(
                  height: getHeight() * (1 / 11),
                  width: double.infinity,
                  color: kPrimaryColor,
                  child: Center(
                    child: Text(
                      "TEXT",
                      style: TextStyle(
                        fontSize: 32,
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
                Container(
                  height: getHeight() * (1 / 11),
                  color: kPrimaryColor,
                  child: TabBar(
                    tabs: [
                      Tab(
                        child: Text(
                          'TITLE1',
                          style: TextStyle(color: Colors.black),
                        ),
                      ),
                      Tab(
                        child: Text(
                          'TITLE2',
                          style: TextStyle(color: Colors.black),
                        ),
                      ),
                      Tab(
                        child: Text(
                          'TITLE3',
                          style: TextStyle(color: Colors.black),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            sliver: SliverFillRemaining(
              child: TabBarView(
                children: [
                  Padding(
                    padding: EdgeInsets.symmetric(
                        horizontal: getProportionateScreenWidth(50),
                        vertical: getProportionateScreenHeight(20)),
                    child: Column(
                      children: [
                        RoundedPicture(),
                        FittedBox(
                          child: Text("Hello World",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  color: Colors.black,
                                  fontSize: 40)),
                        ),
                        SizedBox(
                          height: getProportionateScreenHeight(20),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            RichText(
                              text: TextSpan(
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                      fontSize: 20),
                                  text: 'Info1:  ',
                                  children: [
                                    TextSpan(
                                      text: "123",
                                      style: TextStyle(
                                        color: kSecondaryColor,
                                      ),
                                    ),
                                  ]),
                            ),
                            SizedBox(
                              height: getProportionateScreenHeight(20),
                            ),
                            RichText(
                              text: TextSpan(
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                      fontSize: 20),
                                  text: 'Info2:  ',
                                  children: [
                                    TextSpan(
                                      text: "abcd",
                                      style: TextStyle(
                                        color: kSecondaryColor,
                                      ),
                                    ),
                                  ]),
                            ),
                            SizedBox(
                              height: getProportionateScreenHeight(20),
                            ),
                            RichText(
                              text: TextSpan(
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                      fontSize: 20),
                                  text: 'Info3:  ',
                                  children: [
                                    TextSpan(
                                      text: "xyz",
                                      style: TextStyle(
                                        color: kSecondaryColor,
                                      ),
                                    ),
                                  ]),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Center(
                    child: Text("TITLE2"),
                  ),
                  Center(
                    child: Text("TITLE3"),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  ),

为了实现所需的布局，我尝试在不同的条子内使用 TabBarView，即 SliverList 和 SliverToBoxAdapter，但它们都导致错误，因为 TabBarView 没有预定义的高度。

Answer 1

这是我的实现。
因为没有与大小相关的方法，所以我只是自己设置了一个值。

• 堆栈

  • 默认选项卡控制器

    • 嵌套滚动视图

      • SliverAppBar

      • SliverPersistentHeader

      • SliverPersistentHeader

      • 标签栏视图

  • 容器 // 用于返回按钮

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(initialIndex: 0, length: 3, vsync: this);
  }

  double getHeight() {
    return 800;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      extendBodyBehindAppBar: true,
      body: SafeArea(
        child: Stack(
          children: [
            DefaultTabController(
              length: 3,
              child: NestedScrollView(
                headerSliverBuilder: (context, value) {
                  return [
                    SliverAppBar(
                      expandedHeight: 200.0,
                      flexibleSpace: FlexibleSpaceBar(),
                    ),
                    SliverPersistentHeader(
                      pinned: true,
                      delegate: _SliverAppBarDelegate(
                        minHeight: 90,
                        maxHeight: 90,
                        child: Container(
                          height: getHeight() * (1 / 11),
                          width: double.infinity,
                          color: Colors.green[200],
                          child: Center(
                            child: Text(
                              "TEXT",
                              style: TextStyle(
                                fontSize: 32,
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                    SliverPersistentHeader(
                      pinned: true,
                      delegate: _SliverAppBarDelegate(
                        minHeight: 90,
                        maxHeight: 90,
                        child: Container(
                          color: Colors.green[200],
                          child: TabBar(
                            controller: _tabController,
                            tabs: [
                              Tab(
                                child: Text(
                                  'TITLE1',
                                  style: TextStyle(
                                    color: Colors.black,
                                  ),
                                ),
                              ),
                              Tab(
                                child: Text(
                                  'TITLE2',
                                  style: TextStyle(color: Colors.black),
                                ),
                              ),
                              Tab(
                                child: Text(
                                  'TITLE3',
                                  style: TextStyle(color: Colors.black),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ];
                },
                body: TabBarView(
                  controller: _tabController,
                  children: [
                    SingleChildScrollView(
                      child: Container(
                        padding: EdgeInsets.only(bottom: 600),
                        child: Column(
                          children: [
                            // RoundedPicture(),
                            Icon(
                              Icons.favorite,
                              color: Colors.pink,
                              size: 150.0,
                              semanticLabel:
                                  'Text to announce in accessibility modes',
                            ),
                            FittedBox(
                              child: Text("Hello World",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                      fontSize: 40)),
                            ),
                            SizedBox(
                              height: 20,
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                RichText(
                                  text: TextSpan(
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold,
                                          color: Colors.black,
                                          fontSize: 20),
                                      text: 'Info1:  ',
                                      children: [
                                        TextSpan(
                                          text: "123",
                                          style: TextStyle(),
                                        ),
                                      ]),
                                ),
                                SizedBox(
                                  height: 20,
                                ),
                                RichText(
                                  text: TextSpan(
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold,
                                          color: Colors.black,
                                          fontSize: 20),
                                      text: 'Info2:  ',
                                      children: [
                                        TextSpan(
                                          text: "abcd",
                                          style: TextStyle(),
                                        ),
                                      ]),
                                ),
                                SizedBox(
                                  height: 20,
                                ),
                                RichText(
                                  text: TextSpan(
                                      style: TextStyle(
                                          fontWeight: FontWeight.bold,
                                          color: Colors.black,
                                          fontSize: 20),
                                      text: 'Info3:  ',
                                      children: [
                                        TextSpan(
                                          text: "xyz",
                                          style: TextStyle(),
                                        ),
                                      ]),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                    SingleChildScrollView(
                      child: Container(
                        padding: EdgeInsets.only(bottom: 600),
                        child: Column(
                          children: [
                            Container(
                              padding: EdgeInsets.only(bottom: 600),
                              child: Center(
                                child: Text("TITLE2"),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    SingleChildScrollView(
                      child: Container(
                        padding: EdgeInsets.only(bottom: 600),
                        child: Column(
                          children: [
                            Container(
                              padding: EdgeInsets.only(bottom: 600),
                              child: Center(
                                child: Text("TITLE3"),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Container(
              height: 90,
              padding: EdgeInsets.symmetric(horizontal: 15),
              child: InkWell(
                onTap: () {},
                child: Icon(Icons.arrow_back),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });
  final double minHeight;
  final double maxHeight;
  final Widget child;

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => math.max(maxHeight, minHeight);

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return SizedBox.expand(child: child);
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}

Answer 2

在没有找到可能的解决方案后，我决定实现自己的标签栏视图，而不是使用默认的。该解决方案并不那么花哨，因为选项卡的转换是通过更改当前页码并重建小部件来完成的，但解决了问题。我使用了一个手势检测器来允许用户滑动页面。

          GestureDetector(
           onHorizontalDragEnd: (dragDetails) {
             if (dragDetails.primaryVelocity != 0) {
               final int val = dragDetails.primaryVelocity.sign.toInt();
               if (currentPage - val >= 0 &&
                   currentPage - val < tabController.length)
                 tabController.animateTo(currentPage - val);
             }
           },
           child: CustomScrollView(
             shrinkWrap: true,
             controller: scrollController,
             slivers: [
               SliverToBoxAdapter(
                 child: LogoContainer(),
               ),
               SliverStickyHeader(
                 header: Column(
                   children: [
                     NameContainer(text: 'TEXT'),
                     Container(
                       height: 60,
                       color: kSecondaryColor,
                       child: TabBar(
                         controller: tabController,
                         tabs: [
                           Tab(
                             child: Text(
                               'TITLE1',
                               style: TextStyle(color: Colors.black),
                             ),
                           ),
                           Tab(
                             child: Text(
                               'TITLE2',
                               style: TextStyle(color: Colors.black),
                             ),
                           ),
                           Tab(
                             child: Text(
                               'TITLE3',
                               style: TextStyle(color: Colors.black),
                             ),
                           ),
                         ],
                       ),
                     ),
                   ],
                 ),
                 sliver: SliverToBoxAdapter(
                   child: ConstrainedBox(
                     constraints:
                         BoxConstraints(minHeight: getHeight() * (6 / 11)),
                     child: [
                       Column(
                         children: [
                           RoundedPicture(),
                           FittedBox(
                             child: Text(
                               'HELLO WORLD',
                               style: TextStyle(
                                   fontWeight: FontWeight.bold,
                                   color: Colors.black,
                                   fontSize: 40),
                             ),
                           ),
                           SizedBox(
                             height: getProportionateScreenHeight(20),
                           ),
                           Column(
                             children: [
                               ProfileInfoText(
                                 title: 'INFO1',
                                 text: 'abcd',
                               ),
                               SizedBox(
                                 height: getProportionateScreenHeight(20),
                               ),
                               ProfileInfoText(
                                 title: 'INFO2',
                                 text: '123',
                               ),
                               SizedBox(
                                 height: getProportionateScreenHeight(20),
                               ),
                               ProfileInfoText(
                                 title: 'INFO3',
                                 text: 'xyz',
                               ),
                             ],
                           ),
                         ],
                       ),
                       Center(
                         child: Text("TITLE2"),
                       ),
                       Center(
                         child: Text("TITLE3"),
                       ),
                     ].elementAt(currentPage),
                   ),
                 ),
               ),
             ],
           ),
         ),

我还使用滚动控制器在更改选项卡时将列表设置为动画，使其看起来更流畅。

@override
  void initState() {
    super.initState();
    tabController = TabController(length: 3, vsync: this)
      ..addListener(() async {
        await scrollController.animateTo(
          0,
          duration: Duration(seconds: 1),
          curve: Curves.ease,
        );
        setState(() {
          currentPage = tabController.index;
        });
      });
  }