带有选项卡覆盖内容的 Flutter SliverAppBar

Question

我已经按照本教程 (https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe) 创建了带有 TabBar 的 CollapsingToolbar。

问题是当我滚动 body 的内容时覆盖了 tabBar。

代码如下：

@override
Widget build(BuildContext context) {
return Scaffold(
  body: DefaultTabController(
    length: 2,
    child: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text("Collapsing Toolbar",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    )),
                background: Image.network(
                  "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                  fit: BoxFit.cover,
                )),
          ),
          SliverPersistentHeader(
            delegate: _SliverAppBarDelegate(
              TabBar(
                labelColor: Colors.black87,
                unselectedLabelColor: Colors.grey,
                tabs: [
                  Tab(icon: Icon(Icons.info), text: "Tab 1"),
                  Tab(icon: Icon(Icons.lightbulb_outline), text: "Tab 2"),
                ],
              ),
            ),
            pinned: true,
          ),
        ];
      },
      body: Text("Sample text"),
    ),
  ),
);

代表：

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 new Container(
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

对此有什么想法吗？

Answer 1

万一有人遇到同样的问题，我的解决方法是：https://pub.dartlang.org/packages/extended_nested_scroll_view

示例：

class _MatchFragmentState extends State<MatchFragment> with TickerProviderStateMixin {
  TabController primaryTC;

  @override
  void initState() {
    primaryTC = new TabController(length: 3, vsync: this);
    super.initState();
  }

@override
Widget build(BuildContext context) {

final double statusBarHeight = MediaQuery.of(context).padding.top;
//var tabBarHeight = primaryTabBar.preferredSize.height;
var pinnedHeaderHeight =
//statusBar height
statusBarHeight +
    //pinned SliverAppBar height in header
    kToolbarHeight;

return Scaffold(
    body: NestedScrollViewRefreshIndicator(
      onRefresh: onRefresh,
      child: ExtendedNestedScrollView(
          headerSliverBuilder: (c, f) {
            return <Widget>[
              SliverAppBar(
                pinned: true,
                expandedHeight: kExpandedHeight,
                title: Text('Title'),
                flexibleSpace: FlexibleSpaceBar(
                    background: Image.network(
              "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
              fit: BoxFit.cover,
            ))
                ),
              )
            ];
          },
          pinnedHeaderSliverHeight: pinnedHeaderHeight,
          keepOnlyOneInnerNestedScrollPositionActive: true,
          body: Column(
            children: <Widget>[
              TabBar(
                controller: primaryTC,
                labelColor: Colors.black87,
                unselectedLabelColor: Colors.grey,
                tabs: [
                  Tab(text: "Tab1"),
                  Tab(text: "Tab2"),
                  Tab(text: "Tab3"),
                ],
              ),
              Expanded(
                child: TabBarView(
                  controller: primaryTC,
                  children: <Widget>[
                    new Tab1Screen(),
                    new Tab2Screen(),
                    new Tab3Screen()
                  ],
                ),
              )
            ],
          )
        ),
      )
    );
  }
}

Future<Null> onRefresh() {
  final Completer<Null> completer = new Completer<Null>();
  new Timer(const Duration(seconds: 1), () {
    completer.complete(null);
  });
  return completer.future.then((_) {});
}

Answer 2

一个简单的解决方案是为标签页眉添加装饰色

例如

Container(
  decoration: BoxDecoration(
    color: Colors.white,
  ),
  child: tabBar,
);

Answer 3

我花了几天时间弄清楚 issue.turn 是什么，它可以用 extended_nested_scroll_view 1.0.1 修复，正如上面提到的 @niegus 虽然他使用的是旧版本，所以它对我不起作用。但我已经修复了最新版本
这是一个演示 gif：
https://giphy.com/gifs/lMyFPbu74ycEaQFB1v

实现步骤
1.在pubspec.yaml

添加插件

已更新
extended_nested_scroll_view: ^3.0.0

2.Paste main.dart

中的代码

import 'dart:async';
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart' as extend;
import 'package:flutter/material.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  var scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MatchFragment());
  }

}
class MatchFragment extends StatefulWidget {
  @override
  _MatchFragmentState createState() => _MatchFragmentState();
}

class _MatchFragmentState extends State<MatchFragment>  with TickerProviderStateMixin {
  TabController primaryTC;

  @override
  void initState() {
    primaryTC = new TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
//var tabBarHeight = primaryTabBar.preferredSize.height;
    var pinnedHeaderHeight =
//statusBar height
    statusBarHeight +
        //pinned SliverAppBar height in header
        kToolbarHeight;
    return Scaffold(
        body: DefaultTabController(
          length: 2,
            child: extend.NestedScrollView(
                headerSliverBuilder: (c, f) {
                  return <Widget>[
                  SliverAppBar(
                  pinned: true,
                  expandedHeight: 200,
                  title: Text('Title'),
                  flexibleSpace: FlexibleSpaceBar(
                  background: Image.network(
                  "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                  fit: BoxFit.cover,
                  ))
                  ),

                  ];

                },
                pinnedHeaderSliverHeightBuilder: () {
                  return pinnedHeaderHeight;
                },
                body: Column(
                  children: <Widget>[
                    TabBar(
                      controller: primaryTC,
                      labelColor: Colors.black87,
                      unselectedLabelColor: Colors.grey,
                      tabs: [
                        Tab(text: "Tab1"),
                        Tab(text: "Tab2"),
                      ],
                    ),
                    Expanded(
                      child: TabBarView(
                        controller: primaryTC,
                        children: <Widget>[
                           Text('This is tab one'),
                           Text('This is tab one'),
                        ],
                      ),
                    )
                  ],
                )

            ),
        )
    );


}

}

带有选项卡覆盖内容的 Flutter SliverAppBar

Flutter SliverAppBar with Tabs overlays content

overlay

flutter

flutter-sliver