Flutter - 如何正确删除 TabBarView 中的选项卡答案

【问题标题】：Flutter - How to correctly delete a tab in a TabBarViewFlutter - 如何正确删除 TabBarView 中的选项卡
【发布时间】：2019-04-18 14:22:36
【问题描述】：

我正在使用 TabBarView 创建一个类似浏览器的多选项卡应用程序，其中包含动态选项卡创建。我一直在关注this answer。但是，我在尝试删除选项卡时遇到了一个非常奇怪的问题。由于我是初学者，我不确定是我做错了还是Flutter的错误。

这个问题的概述：如果TabBarView中还有两个标签，并且你删除了第二个标签正在查看它，TabBarView会抛出异常，抱怨它项目编号即使我提前切换了标签。从那时起，这个异常就会破坏标签管理。

如果有人能告诉我实现动态标签系统的正确方法，我将不胜感激。

演示代码如下。代码已完成并可以运行。创建几个标签，然后从后到前删除它们。删除倒数第二个选项卡时会出现异常。之后标签系统就会变得一团糟。

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() 是如何执行删除后的滚动动画。

【问题讨论】：

好吧，由于目前没有答案，我正在分享我的解决方法。自定义 PageView 而不是使用 TabBarView 解决了这个问题。一个很好的例子是 package:simple_coverflow。

标签： tabs widget flutter flutter-layout

【解决方案1】：

事实证明这是一个颤振小部件错误。删除选项卡时不应抛出此异常。

正如Github issue 中所报告的那样。它应该在将来的某个时候修复。

现在我正在使用 PageView 作为替代方案。 PageView 工作得很好。

【讨论】：