flutter - 在 Flutter 中更改选项卡时添加进度指示器

Question

在我的一个屏幕上，我使用了 TAB BAR。每个选项卡对应于应显示项目列表的一种方式。它是一个单词列表（英语和法语翻译）。第一个 Tab 对应于字母顺序。第二个是语法类别（名词、副词......），第三个是按难度级别显示单词。我生成列表等没有问题...但是当有很多单词时，当您滑动屏幕或单击选项卡时，屏幕会延迟更改...有没有办法添加一个进度指示器向用户显示应用程序正在计算并准备好屏幕？

我需要的是一种检测用户何时点击选项卡或滑动屏幕的方法。选项卡似乎不像其他按钮那样起作用。

这是代码的一部分：

          bottom: TabBar(
              controller: _controller,
              indicatorWeight: 10,
              indicatorColor: Colors.green[800],
              tabs: [
                Tab(
                  child: Text(
                    'Ordre alphabétique',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.red[800]),
                  ),
                ),
                Tab(
                  child: Text(
                    'Catégorie grammaticale',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.red[800]),
                  ),
                ),
                Tab(
                  child: Text(
                    'Niveau',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.red[800]),
                  ),
                ),
              ]),
        ),
        body: TabBarView(
          controller: _controller,
          children: [
            // Ecran par ordre alphabétique
            ListView(children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: WordListCard(
                  taille: lP.generatedList.length,
                  titre: lP.selectedTheme != ''
                      ? lP.selectedTheme.toUpperCase()
                      : lP.selectedSubtheme.toUpperCase(),
                  mots: ListView.builder(
                   
                      itemCount: lP.generatedList.length,
                      itemBuilder: (context, index2) {
                        return ListTile(
                          contentPadding: EdgeInsets.all(0),
                          title: DicoListViewWordCard(
                            number: index2 + 1,
                            main: lP.dicoLanguage == Language.english
                                ? wordBank[lP.generatedList[index2]].main
                                : wordBank[lP.generatedList[index2]].mainFr,
                            trad: lP.dicoLanguage == Language.english
                                ? wordBank[lP.generatedList[index2]].mainFr
                                : wordBank[lP.generatedList[index2]].main,
                            onPress: null,
                          ),
                        );
                      }),
                ),
              ),
            ]),

            // ECRAN par catégorie grammaticale

            ListView(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: DicoListGrammarCard(
                    taille: lP.generatedList.length,
                    tailleNouns: lP.nounList.length,
                    tailleAdj: lP.adjectiveList.length,
                    tailleVerbs: lP.verbList.length,
                    tailleAdv: lP.adverbList.length,
                    taillePrep: lP.prepList.length,
                    titre: lP.selectedTheme != ''
                        ? lP.selectedTheme.toUpperCase()
                        : lP.selectedSubtheme.toUpperCase(),
                    nouns: ListView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: lP.nounList.length,
                        itemBuilder: (context, index1) {
                          return ListTile(
                            contentPadding: EdgeInsets.all(0),
                            title: DicoListViewWordCard(
                              number: index1 + 1,
                              main: lP.dicoLanguage == Language.english
                                  ? wordBank[lP.nounList[index1]].main
                                  : wordBank[lP.nounList[index1]].mainFr,
                              trad: lP.dicoLanguage == Language.english
                                  ? wordBank[lP.nounList[index1]].mainFr
                                  : wordBank[lP.nounList[index1]].main,
                            ),
                          );
                        }),
                    adj: ListView.builder(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        itemCount: lP.adjectiveList.length,
                        itemBuilder: (context2, index2) {
                          return ListTile(
                            contentPadding: EdgeInsets.all(0),
                            title: DicoListViewWordCard(
                              number: index2 + 1,
                              main: lP.dicoLanguage == Language.english
                                  ? wordBank[lP.adjectiveList[index2]].main
                                  : wordBank[lP.adjectiveList[index2]].mainFr,
                              trad: lP.dicoLanguage == Language.english
                                  ? wordBank[lP.adjectiveList[index2]].mainFr
                                  : wordBank[lP.adjectiveList[index2]].main,
                            ),
                          );
                        }),
                    verbs: ListView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: lP.verbList.length,
                        itemBuilder: (context3, index3) {
                          return ListTile(
                            contentPadding: EdgeInsets.all(0),
                            title: DicoListViewWordCard(
                              number: index3 + 1,
                              main: lP.dicoLanguage == Language.english
                                  ? wordBank[lP.verbList[index3]].main
                                  : wordBank[lP.verbList[index3]].mainFr,
                              trad: lP.dicoLanguage == Language.english
                                  ? wordBank[lP.verbList[index3]].mainFr
                                  : wordBank[lP.verbList[index3]].main,
                            ),
                          );
                        }),
                    adv: ListView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: lP.adverbList.length,
                        itemBuilder: (context, index2) {
                          return ListTile(
                            contentPadding: EdgeInsets.all(0),
                            title: DicoListViewWordCard(
                              number: index2 + 1,
                              main: lP.dicoLanguage == Language.english
                                  ? wordBank[lP.adverbList[index2]].main
                                  : wordBank[lP.adverbList[index2]].mainFr,
                              trad: lP.dicoLanguage == Language.english
                                  ? wordBank[lP.adverbList[index2]].mainFr
                                  : wordBank[lP.adverbList[index2]].main,
                            ),
                          );
                        }),
                    prep: ListView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: lP.prepList.length,
                        itemBuilder: (context, index2) {
                          return ListTile(
                            contentPadding: EdgeInsets.all(0),
                            title: DicoListViewWordCard(
                              number: index2 + 1,
                              main: lP.dicoLanguage == Language.english
                                  ? wordBank[lP.prepList[index2]].main
                                  : wordBank[lP.prepList[index2]].mainFr,
                              trad: lP.dicoLanguage == Language.english
                                  ? wordBank[lP.prepList[index2]].mainFr
                                  : wordBank[lP.prepList[index2]].main,
                            ),
                          );
                        }),
                  ),
                ),
              ],
            ),

标签： fluttertabs

Answer 1

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
 bool _load = false;

 void onClick() {
   setState(() {
     _load = true;
   });

   yourFunctionCode;

   setState(() {
     _load = false;
   });
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _load
        ? Center(
          child: CircularProgressIndicator(),
        )
        : Container()
    );
  }
}