如何使 TabBar 在 SliverAppBar 中不动？

Question

这是我的第一个问题。我目前正在使用标签栏处理 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),
                  )),
            ))
          ],
        ),
      ),
    ),
  );
}
}

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

Answer 1

你必须用一个堆栈包裹你的 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(...),
),