我正在使用 sliver 应用栏来获得更好的用户界面，我想在必须固定的应用栏内保留标签。只有标签必须固定，而带有标题的应用栏应该展开，只能拖动到顶部。当我一直固定为 true 时，选项卡与正文中的内容重叠，这是我不想要的。
return Scaffold(
body: SafeArea(
child: DefaultTabController(
length: 5,
child: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Colors.white,
floating: false,
flexibleSpace: FlexibleSpaceBar(
title: Text(
"Home Page",
style: TextStyle(
color: Colors.teal,
),
),
),
actions: [
IconButton(
icon: Icon(
Icons.message,
color: Colors.grey[700],
),
onPressed: () {},
),
SizedBox(width: 5)
],
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
TabBar(
labelColor: Colors.teal,
unselectedLabelColor: Colors.grey[600],
tabs: [
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.people_outline)),
Tab(icon: Icon(Icons.account_balance)),
Tab(icon: Icon(Icons.notifications_active)),
Tab(icon: Icon(Icons.menu)),
],
),
),
),
];
},
body: ListView(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Row(
children: [
SizedBox(width: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: CircleAvatar(
radius: width(context) * 0.08,
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: Container(
width: width(context) * 0.74,
height: width(context) * 0.15,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[800]),
borderRadius: BorderRadius.circular(100)),
child: Column([![enter image description here][1]][1]
mainAxisAlignment: MainAxisAlignment.center,
children: [
Wrap(
children: [
Text('To ask a question \n type here...', style: TextStyle(fontSize: 22),),
],
),
],
),
),
),
],
),
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: height(context)*0.07,
width: width(context)*0.70,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[800]),
borderRadius: BorderRadius.circular(10)),
),
),
Container(
height: height(context)*0.07,
width: width(context)*0.25,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[800]),
borderRadius: BorderRadius.circular(10)),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8, right: 8),
child: Divider(
color: Colors.grey[600],
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8, right: 8),
child: Card(
child: Container(
height: 200,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8, right: 8),
child: Card(
child: Container(
height: 200,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8, right: 8),
child: Card(
child: Container(
height: 200,
),
),
), Padding(
padding: const EdgeInsets.only(top: 8.0, left: 8, right: 8),
child: Card(
child: Container(
height: 200,
),
),
),
],
),
],
),
),
),
),
);
}
}
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;
}
}
