[英]How to create a dynamic TabBarView/ Render a new Tab with a function in Flutter?
[英]Flutter - How to correctly delete a tab in a TabBarView
我正在使用TabBarView来创建具有动态标签创建功能的类似浏览器的多标签应用程序。 我一直在关注这个答案 。 但是,在尝试删除选项卡时遇到了一个非常奇怪的问题。 由于我是初学者,所以不确定自己做错了方法还是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()无关。
好吧,事实证明这是一个混乱的小部件错误。 删除选项卡时,不应引发此异常。
正如在这个Github问题中报道的。 应该在将来的某个时间修复。
现在,我正在使用PageView作为替代。 PageView可以正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.