Flutter Listview 滑动以更改 TabBar 索引

Question

我已经在TabBar没有TabBarView. 我使用的是单个选项卡ListView，body因为选择选项卡后的布局对于所有选项卡都是相同的。

我想要实现的是，在列表视图中向左/向右滑动时更改选项卡。我怎样才能做到这一点？

标签栏

TabBar(
        indicatorWeight: 3,
        indicatorSize: TabBarIndicatorSize.label,
        onTap: (index) {
          categoryId = newsProvider.categories[index].id;
          page = 1;
          fetchPosts(newsProvider);
        },
        isScrollable: true,
        tabs: [
          for (Category category in newsProvider.categories)
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
              child: Text(
                category.name,
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
              ),
            ),
        ],
      ),

身体

ListView.builder(
                    padding: EdgeInsets.only(bottom: 60),
                    physics: BouncingScrollPhysics(),
                    controller: _scrollController,
                    itemCount: newsProvider.posts.length,
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        onTap: () {
                          Navigator.of(context).push(MaterialPageRoute(
                            builder: (BuildContext context) =>
                                HabaruDetails(newsProvider.posts[index]),
                          ));
                        },
                        child: Container(
                          height: 200,
                          margin: EdgeInsets.only(left: 10, right: 10, top: 10),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(7),
                            child: Stack(
                              children: [
                                Positioned.fill(
                                  child: Hero(
                                    tag: newsProvider.posts[index].id,
                                    child: FadeInImage.memoryNetwork(
                                        placeholder: kTransparentImage,
                                        fit: BoxFit.cover,
                                        image: newsProvider
                                            .posts[index].betterFeaturedImage.mediumLarge),
                                  ),
                                ),
                                Container(
                                  height: 200,
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      gradient: LinearGradient(
                                          begin: FractionalOffset.topCenter,
                                          end: FractionalOffset.bottomCenter,
                                          colors: [
                                            Colors.black.withOpacity(0.0),
                                            Colors.black.withOpacity(0.95),
                                          ],
                                          stops: [
                                            0.0,
                                            1.0
                                          ])),
                                ),
                                Positioned.fill(
                                  child: Align(
                                    alignment: Alignment.bottomCenter,
                                    child: Padding(
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 16, vertical: 30),
                                      child: Text(
                                        newsProvider.posts[index].title.rendered,
                                        textAlign: TextAlign.center,
                                        textDirection: TextDirection.rtl,
                                        style: TextStyle(
                                          fontSize: 24,
                                          fontWeight: FontWeight.bold,
                                          color: Colors.white,
                                          height: 1.7,
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      );
                    },
                  )

Answer 1

我认为您仍然必须使用 TabBarView，但您可以根据类别列表动态生成其子项，如下所示。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [...],
          ),
        ),
        body: TabBarView(
          children: newsProvider.categories.map(
                (e) => ListView.builder(...).toList(),
          ),
        ),
      ),
    ),
  );
}