J'ai une simple AppBar personnalisée avec le code suivant (j'ai retiré du code pour simplifier. Ce n'est pas nécessaire pour la question.):

class SimpleAppBarPageState extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => const Size.fromHeight(100);

  @override
  Widget build(BuildContext context) => DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        ...
        bottom: TabBar(
          isScrollable: true,
          indicatorColor: Colors.white,
          indicatorWeight: 5,
          tabs: [
            Tab(child: Text('1',
              style: TextStyle(
                fontWeight: FontWeight.w700,
                fontSize: 20,
              ),
            ),
            ),
            Tab(child: Text('2',
              style: TextStyle(
                fontWeight: FontWeight.w700,
                fontSize: 20,
              ),
            ),
            )
          ],
        ),
        elevation: 20,
        titleSpacing: 20,
      ),
      body: TabBarView(
        children: [
          buildPageOne(),
          buildPageTwo()
        ],
      ),
    ),
  );

Maintenant, j'ai deux fichiers de fléchettes dont l'un contient le code pour la première page et l'autre fichier contient le code pour la page deux.

Maintenant, je veux que la première page soit ouverte lorsque l'onglet «1» est sélectionné et la page deux doit être ouverte lorsque l'onglet «2» est sélectionné.

J'ai donc pensé à définir un nouveau Widget qui ouvre la page correspondante. Voici mes pensées:

Widget buildPageOne() {
    Navigator.of(context)
        .push(
      MaterialPageRoute(
          builder: (context) => PageOne()
      ),
    );
  }

Je pense que ce dernier exemple de code est complètement inutile, mais il montre en quelque sorte mon intention de ce qui devrait se passer.

Pouvez-vous m'aider à résoudre ce problème?

Je serais très heureux d'une réponse! Les salutations

1
Arved Friese 13 mars 2021 à 13:07

2 réponses

Meilleure réponse

Tout d'abord, n'utilisez pas Navigator si vous utilisez des onglets. Deuxièmement, vous avez besoin d'un TabController pour gérer vos onglets, par exemple vous pouvez utiliser le DefaultTabController. Avec TabBar, vous pouvez définir le texte / l'icône de chaque onglet sous le Appbar. Dans votre TabBarView, vous définissez les widgets que vous souhaitez afficher. Dans votre cas, omettez le navigateur et fournissez simplement les widgets que vous souhaitez afficher dans TabBarView

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      title: 'Tabs',
      bottom: TabBar(
        tabs:[
          Tab(icon: Icon(Icons.home)),
          Tab(icon: Icon(Icons.settings)),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Widget1(),
        Widget2()
      ]
      ),
  ),
);
2
quoci 13 mars 2021 à 11:30

N'utilisez pas de méthodes pour naviguer vers un nouvel écran. Créez 2 widgets séparés sans état ou avec état: Widget 1 (), Widget 2 (),

Et dans les enfants de TabBarView, utilisez ces 2 widgets en tant qu'enfants.

body: TabBarView(
      children: [
        Widget1(),
        Widget2(),
      ],
    ),

Sauvegardez-les, faites un redémarrage à chaud

0
Farrukh Sajjad 13 mars 2021 à 10:36