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;
}
}
电流输出:
在所需的输出中,内容应粘贴到选项卡栏的底部