Flutter-如何正确删除TabBarView中的标签

时间:2018-11-15 13:07:16

标签: tabs widget flutter flutter-layout

我正在使用TabBarView创建具有动态标签创建功能的类似浏览器的多标签应用程序。我一直在关注this answer。但是,在尝试删除选项卡时遇到了一个非常奇怪的问题。由于我是初学者,所以不确定自己做错了方法还是Flutter错误。

此问题的概述:如果TabBarView中仍然有两个选项卡,并且您在查看第二个选项卡时已删除,TabBarView会抛出异常,抱怨它项编号<2时无法执行滚动动画。但是,即使我在功能中预先切换了制表符,该异常仍然会出现。从那时起,此异常使选项卡管理更加麻烦。

如果有人可以向我展示实现动态标签系统的正确方法,我将不胜感激。

演示代码如下。代码已完成并可以运行。创建一些标签,然后从后到前将其删除。当您删除倒数第二个选项卡时,将发生异常。此后,选项卡系统将表现得一团糟。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> with TickerProviderStateMixin {
  List<Tab> tabs = [];TabController tabController;var count = 1;
  void newTab() {
    setState(() {
      tabs.add(Tab(text: '$count',));count++;
      tabController = TabController(length: tabs.length, vsync: this);
    });
  }
  void closeCurrentTab() {
    setState(() {
      //  A bunch of if-statement..........
      //  Even if you switch the tab before deletion, the error still occur.
      //tabController.animateTo(tabController.index-1);
      tabs.removeAt(tabController.index);
      tabController = TabController(length: tabs.length, vsync: this);
    });
  }
  @override void initState() {
    super.initState();
    tabs.add(Tab(text: '0',));
    tabController = TabController(length: tabs.length, vsync: this);
  }
  @override void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          actions: <Widget>[
            IconButton(icon: Icon(Icons.add), onPressed: newTab),
            IconButton(icon: Icon(Icons.close), onPressed: closeCurrentTab,)
          ],
          bottom: TabBar(controller: tabController, tabs: tabs.map((tab) => tab).toList()),// A trick to trigger TabBar rebuild.
        ),
        body: TabBarView(controller: tabController, children: tabs.map((tab) => Text(tab.text)).toList()),
      ),
    );
  }
}

在我看来,删除后执行的滚动动画与TabController.animateTo()无关。

1 个答案:

答案 0 :(得分:0)

事实证明这是一个不稳定的小部件错误。删除标签时,不应抛出此异常。

Github issue中的报告。它应该在将来的某个时间修复。

现在我正在使用PageView作为替代。 PageView可以正常工作。