Flutter 创建带选项卡的折叠工具栏时,选项卡栏内容一直向上滚动到状态栏

Flutter 创建带选项卡的折叠工具栏时,选项卡栏内容一直向上滚动到状态栏,flutter,flutter-layout,flutter-animation,Flutter,Flutter Layout,Flutter Animation,我正在尝试实现一个带有选项卡的折叠工具栏。滚动浏览选项卡的内容时,不会粘在选项卡的底部,而是向上滚动直到状态栏 我不确定我到底做错了什么。我想请你帮我解决这个问题 以下是代码片段: import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:mobile/src/data/model/order_response.dart'; import 'package:mo

我正在尝试实现一个带有选项卡的折叠工具栏。滚动浏览选项卡的内容时,不会粘在选项卡的底部,而是向上滚动直到状态栏

我不确定我到底做错了什么。我想请你帮我解决这个问题

以下是代码片段:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mobile/src/data/model/order_response.dart';
import 'package:mobile/src/widget/order_view.dart';

class OrderDetailPage extends StatefulWidget {
  final OrderResponse item;

  OrderDetailPage(this.item);

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

class _OrderDetailPageState extends State<OrderDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  backgroundColor: Colors.black12,
                  elevation: 0.0,
                  expandedHeight: 230,
                  floating: false,
                  pinned: true,
                  flexibleSpace: FlexibleSpaceBar(
                    collapseMode: CollapseMode.parallax,
                    background: Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        child: Column(
                          children: [
                            SizedBox(
                              height: 90,
                            ),
                            OrderListItemView(widget.item, null)
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
                SliverPersistentHeader(
                  pinned: true,
                  delegate: _SliverAppBarDelegate(
                    TabBar(
                      labelColor: Colors.black87,
                      unselectedLabelColor: Colors.grey,
                      tabs: [
                        new Tab(text: "Instant Match"),
                        new Tab(text: "Requests"),
                      ],
                    ),
                  ),
                )
              ];
            },
            body: new TabBarView(
              children: <Widget>[
                Text(
                  'This content should stick to the bottom of tab bar',
                  style: TextStyle(fontSize: 24),
                ),
                Text('This content should stick to the bottom of tab bar')
              ],
            )),
      ),
    );
  }

  void _onClickMenu(String value) {}
}

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;
  }
}
import'包装:flift/cupertino.dart';
进口“包装:颤振/材料.省道”;
导入“package:mobile/src/data/model/order_response.dart”;
导入“package:mobile/src/widget/order_view.dart”;
类OrderDetailPage扩展StatefulWidget{
最终订单响应项;
OrderDetailPage(此项);
@凌驾
_OrderDetailPageState createState()=>\u OrderDetailPageState();
}
类_OrderDetailPageState扩展状态{
@凌驾
小部件构建(构建上下文){
返回脚手架(
正文:DefaultTabController(
长度:2,
子:嵌套滚动视图(
班主任:
(BuildContext上下文,boolInnerBoxIsCrowled){
返回[
滑杆(
背景颜色:Colors.black12,
标高:0.0,
扩展高度:230,
浮动:假,
对,,
flexibleSpace:FlexibleSpaceBar(
collapseMode:collapseMode.视差,
背景:对齐(
对齐:对齐.bottomCenter,
子:容器(
子:列(
儿童:[
大小盒子(
身高:90,
),
OrderListItemView(widget.item,null)
],
),
),
),
),
),
滑冰机(
对,,
代表:_SliverAppBarDelegate(
塔巴(
labelColor:Colors.black87,
未选择的标签颜色:Colors.grey,
选项卡:[
新选项卡(文本:“即时匹配”),
新选项卡(文本:“请求”),
],
),
),
)
];
},
正文:新选项卡视图(
儿童:[
正文(
'此内容应粘贴到选项卡栏的底部',
样式:TextStyle(字体大小:24),
),
Text('此内容应粘贴到选项卡栏的底部')
],
)),
),
);
}
void _onClickMenu(字符串值){}
}
类_SliverAppBarDelegate扩展SliverPersistentHeaderDelegate{
_SliverAppBarDelegate(此选项卡);
最终TabBar _TabBar;
@凌驾
double-get-minExtent=>\u tabBar.preferredSize.height;
@凌驾
double get maxExtent=>\u tabBar.preferredSize.height;
@凌驾
小部件构建(
BuildContext上下文、双收缩偏移、布尔重叠内容){
退回新货柜(
孩子:_tabBar,
);
}
@凌驾
布尔应该重建(\u SliverAppBarDelegate oldDelegate){
返回false;
}
}
电流输出:

在所需的输出中,内容应粘贴到选项卡栏的底部