0

这是我的第一个问题。我目前正在使用标签栏处理 sliverAppBar。当我向下拖动条子时，我可以做些什么来使标签栏保持在顶部而不是向下移动？ 这是基于我的代码的外观，这是我的代码：

@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),
                  )),
            ))
          ],
        ),
      ),
    ),
  );
}
}

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

4

1 回答 1

0

你必须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(...),
),
于 2020-09-28T16:12:47.040 回答