使用Flutter的TabBar和TabBarView开发一个可以动态增加tab的页面： (Use Flutter's TabBar and TabBarView to develop a page that can dynamically add tabs:)
class _DemoTabState extends State<DemoTab> with TickerProviderStateMixin {
TabController tabController;
int tabNum = 3;
@override
Widget build(BuildContext context) {
int index = tabController?.index ?? 0;
tabController?.dispose();
tabController = TabController(length: tabNum, vsync: this, initialIndex: index);
tabController.animateTo(tabNum-1);
var tabs = List.generate(
tabNum,
(index) => Tab(
text: 'tab' + index.toString(),
),
);
var tabPages = List.generate(
tabNum,
(index) => Center(
child: TestPage(index),
),
);
var tabBar = TabBar(
tabs: tabs,
controller: tabController,
);
var tabBarView = TabBarView(
children: tabPages,
controller: tabController,
);
var result = Scaffold(
appBar: tabBar,
body: tabBarView,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
tabNum++;
});
},
),
);
return result;
}
}
-
当定位在最后一个tab时再增加时，新增的page会加载两次，第一次加载后立刻被dispose，pring： (When it is added when positioned at the last tab, the new page will be loaded twice, and it will be dispose immediately after the first load, print:)
2--testPage--didUpdateWidget 2--testPage--build 3--testPage--initState 3--testPage--didChangeDependencies 3--testPage--build 3--testPage--dispose 3--testPage--initState 3--testPage--didChangeDependencies 3--testPage--build 2--testPage--dispose -
当定位在最后一个tab时再增加时，新增的page只加载一次，打印： (When it is added when positioned at the last tab, the newly added page is only loaded once, print:)
1--testPage--didUpdateWidget 1--testPage--build 3--testPage--initState 3--testPage--didChangeDependencies 3--testPage--build 1--testPage--dispose
Live Demo: http://cairuoyu.com/flutter_demo
Code: https://github.com/cairuoyu/flutter_demo/blob/main/lib/demo/demo_tab.dart or
https://github.com/cairuoyu/flutter_admin/blob/master/lib/pages/layout/layout_center.dart
Results of flutter doctor -v:
[√] Flutter (Channel beta, 1.25.0-8.3.pre, on Microsoft Windows [Version 10.0.18363.1316], locale zh-CN)
• Flutter version 1.25.0-8.3.pre at F:\projects\f\flutter
• Framework revision 5d36f2e7f5 (2 weeks ago), 2021-01-14 15:57:49 -0800
• Engine revision 7a8f8ca02c
• Dart version 2.12.0 (build 2.12.0-133.7.beta)
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at C:\Users\cairu\AppData\Local\Android\sdk
• Platform android-30, build-tools 29.0.3
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[√] Android Studio (version 4.1.0)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
Is this a Flutter bug, or is there a problem with my writing?
