dimanche 31 janvier 2021

Use Flutter's TabBar and TabBarView: When you locate the last tab and add a new tab, the page will load twice

使用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;
  }
}
  1. 当定位在最后一个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  
    
  2. 当定位在最后一个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?




Aucun commentaire:

Enregistrer un commentaire