Tabbarview 子项在选项卡顶部滚动

问题描述

这是涉及持久化的sliver app bar的代码

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 的内容在选项卡顶部滚动。滚动开始后，标签的背景往往会变得透明

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）