首页 > 解决方案 > 在非相邻选项卡上使用 TabBar 进行导航时的奇怪行为

问题描述

在 TabBar 选项卡之间导航时,我遇到了一种奇怪的行为;我总共有 8 个标签。

如果我在选项卡之间导航(点击或滑动):

tab1 -> tab2 -> tab3 -> tab4 -> tab5 -> tab6 -> tab7 -> tab8按顺序工作,然后按预期工作。

但是,如果在导航期间我跳过相邻的选项卡,并直接从 tab1 转到 tab4,例如如下所示:

tab1 -> tab4 或 Tab6 -> Tab2 然后会发生奇怪的行为,而是加载不同的选项卡或状态。

我有两个类,ExploreList 包含选项卡,它调用 NewsStream 对象。这是代码:

class ExploreList extends StatefulWidget {
  @override
  createState() => ExploreListState();
}

class ExploreListState extends State<ExploreList> {
  @override
  void initState() {
    setState(() {});
    scrollControllerExploreList = ScrollController(initialScrollOffset: 84);
    super.initState();
  }

  @override
  void dispose() {
    scrollControllerExploreList.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    setState(() {});
return DefaultTabController(
      length: 8,
      child: Scaffold(
        appBar: AppBar(
            title: Text('Top Headlines')

          bottom: const TabBar(
            isScrollable: true,
            tabs: [
              Tab(text: 'World'),
              Tab(text: 'Nation'),
              Tab(text: 'Business'),
              Tab(text: 'Entertainment'),
              Tab(text: 'Health'),
              Tab(text: 'Science'),
              Tab(text: 'Sports'),
              Tab(text: 'Technology'),
            ],
          ),
        ),
        body: SafeArea(
          bottom: false,
          child: TabBarView(
            children: [
              NewsStream("world"),
              NewsStream("nation"),
              NewsStream("business"),
              NewsStream("entertainment"),
              NewsStream("health"),
              NewsStream("science"),
              NewsStream("sports"),
              NewsStream("technology"),
            ],
          ),
        ),
      ),
    );

  }
}

这是包含该集团的 NewsStream 类:

ScrollController scrollControllerNewsStream;

class NewsStream extends StatefulWidget {

  final String topic;

  const NewsStream(this.topic);

  @override
  createState() => NewsStreamState();
}

class NewsStreamState extends State<NewsStream> {

  @override
  void initState() {
    setState(() {});
    scrollControllerNewsStream = ScrollController(initialScrollOffset: 84);
    super.initState();
  }

  @override
  void dispose() {
    scrollControllerNewsStream.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    bloc.fetchExploreNews(widget.topic);
    setState(() {}); 
    return SafeArea(
      child: CustomScrollView(
        controller: scrollControllerNewsStream,
        slivers: <Widget>[
          SliverToBoxAdapter(

          ),

          streamBuild(bloc.exploreNews),

        ],
      ),
    );
  }
}

标签: flutterdarttabs

解决方案


推荐阅读