如何使TabBar在SliverAppBar中不移动？

问题描述

这是我的第一个问题。我目前正在使用带有Tabbar的sliverAppBar。当我向下拖动条子时，我能做些什么来使标签栏保持在顶部而不会向下移动？ this is how its looks based on my code，这是我的代码：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(primaryColor: Colors.green[700]),home: DefaultTabController(
      length: 3,child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              expandedHeight: 450,pinned: true,bottom: TabBar( 
                tabs: [
                  Tab(icon: Icon(Icons.directions_car)),Tab(icon: Icon(Icons.directions_transit)),Tab(icon: Icon(Icons.directions_bike)),],),backgroundColor: Colors.green[700],flexibleSpace: FlexibleSpaceBar(
                background: Image.asset(
                  'images/green.png',fit: BoxFit.cover,SliverFillRemaining(
                child: Container(
              child: Column(
                children: List<int>.generate(12,(index) => index)
                    .map((index) => Container(
                          height: 40,margin: EdgeInsets.symmetric(vertical: 10),color: Colors.grey[300],alignment: Alignment.center,child: Text('$index item'),))
                    .toList(),decoration: Boxdecoration(
                  color: Colors.white,borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(15),topRight: Radius.circular(15),)),))
          ],);
}
}

编辑：我仍然希望条子的功能能够向下拖动，但我希望将选项卡放在顶部而不移动

解决方法

您必须用堆栈将CustomScrollView包裹起来并将TabBar放在其上方

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.green[700]),home: DefaultTabController(
        length: 3,child: Scaffold(
          body: Stack(
            children: <Widget>[
              CustomScrollView(
                slivers: <Widget>[
                  SliverAppBar(
                    expandedHeight: 450,pinned: true,backgroundColor: Colors.green[700],),SliverFillRemaining(
                      hasScrollBody: false,child: Container(
                        child: Column(
                          children: List<int>.generate(12,(index) => index)
                              .map((index) => Container(
                                    height: 40,margin: EdgeInsets.symmetric(vertical: 10),color: Colors.grey[300],alignment: Alignment.center,child: Text('$index item'),))
                              .toList(),decoration: BoxDecoration(
                            color: Colors.white,borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(15),topRight: Radius.circular(15),)),))
                ],/// YOUR TAB WITH ICONS
              Positioned(
                top: MediaQuery.of(context).padding.top,child: Container(
                  width: MediaQuery.of(context).size.width,height: 60.0,color: Colors.green[700],child: TabBar(
                    tabs: [
                      Tab(icon: Icon(Icons.directions_car)),Tab(icon: Icon(Icons.directions_transit)),Tab(icon: Icon(Icons.directions_bike)),],);
  }

这不会解决底部的溢出问题。如果您也想解决此问题，只需将hasScrollBody: false,添加到SliverFillRemaining中，如下所示：

SliverFillRemaining(
     hasScrollBody: false,child: Container(...),

sliverappbar tabbar tabs