扑-在NestedScrolllView中滚动/滑动TabBar时出现问题

时间:2019-06-16 09:43:59

标签: scroll flutter dart tabbar nestedscrollview

我实现了TabBar,其中TabbarView除了NestedScrollView之外都是动态的。当我想尝试滑动Tab时,TabBarView上的位置没有响应。即使我设置了isScrollable = true;

我的代码

 @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<MainModel>(
      builder: (context, child, model) {
        return Scaffold(
          // backgroundColor: Colors.red,
          body: NestedScrollView(
              headerSliverBuilder:
                  (BuildContext context, bool innerBoxIsScrolled) {
                return [
                  SliverAppBar(
                    pinned: false,
                    backgroundColor: Colors.white,
                    flexibleSpace: FlexibleSpaceBar(
                      collapseMode: CollapseMode.pin,
                      background: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          SizedBox(height: 5),
                          _buildBackBtn(context),
                          SizedBox(height: 20),
                          _buildCarouselLabel(),
                          SizedBox(height: 15),
                          Container(
                              margin: model.isLoadingKnowledge ||
                                      model.carouselList
                                              .where((carousel) =>
                                                  carousel.relationships
                                                      .category.attr.name ==
                                                  _selectedTab.attributes.name)
                                              .toList()
                                              .length ==
                                          0
                                  ? EdgeInsets.only(top: 60)
                                  : EdgeInsets.zero,
                              alignment: Alignment.center,
                              child: model.isLoadingKnowledge
                                  ? Center(child: CircularProgressIndicator())
                                  : model.carouselList
                                              .where((carousel) =>
                                                  carousel.relationships
                                                      .category.attr.name ==
                                                  _selectedTab.attributes.name)
                                              .toList()
                                              .length ==
                                          0
                                      ? Center(
                                          child: Text(
                                              "There is no carousel on ${_selectedTab.attributes.label}"))
                                      : KnowledgeImageSlider(_selectedTab)),
                          SizedBox(height: 15),
                        ],
                      ),
                    ),
                    expandedHeight: 380.0,
                    bottom: TabBar(
                      labelColor: Colors.grey[700],
                      unselectedLabelColor: Colors.grey[400],
                      controller: _tabController,
                      indicatorColor: Color(0xff3FBCD7),
                      indicatorSize: TabBarIndicatorSize.tab,
                      indicatorWeight: 3.0,
                      isScrollable: true,
                      labelStyle: TextStyle(
                          fontSize: 16,
                          height: 2.2,
                          fontWeight: FontWeight.w500,
                          color: Colors.white),
                      // indicator: ShapeDecoration(
                      //   // color: Colors.white,
                      //   shape: const StadiumBorder(
                      //         side: BorderSide(
                      //           color: Colors.white,
                      //           width: 2.0,
                      //         ),
                      //       ) +
                      //       const StadiumBorder(
                      //         side: BorderSide(
                      //           color: Colors.transparent,
                      //           width: 8.0,
                      //         ),
                      //       ),
                      // ),
                      tabs: model.knowledgeCategoryList
                          .map((cat) => Tab(text: cat.attributes?.label))
                          .toList(),
                    ),
                  )
                ];
              },
              body: model.isLoadingKnowledge
                  ? Center(child: CircularProgressIndicator())
                  : ListView.builder(
                      itemCount: model.knowledgeList
                          .where((article) =>
                              article.relationships.category.attr.label ==
                                  _selectedTab.attributes.label ??
                              "Picks")
                          .toList()
                          .length,
                      itemBuilder: (context, i) {
                        var article = model.knowledgeList
                            .where((article) =>
                                article.relationships.category.attr.label ==
                                    _selectedTab.attributes?.label ??
                                "PICKS")
                            .toList()[i];

                        return ArticleItemCard(article);
                      },
                    )),
        );
      },
    );
  }

结果:

image

如何使其像往常一样滚动/滑动标签?

任何答案将不胜感激。

0 个答案:

没有答案