web-dev-qa-db-fra.com

Comment obtenir l'index d'onglet actuel dans Flutter

Dans le flutter, la mise en page d'un onglet est simple et directe. Ceci est un exemple simple de l'officiel documentation :

import 'package:flutter/material.Dart';

void main() {
  runApp(new TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            bottom: new TabBar(
              tabs: [
                new Tab(icon: new Icon(Icons.directions_car)),
                new Tab(icon: new Icon(Icons.directions_transit)),
                new Tab(icon: new Icon(Icons.directions_bike)),
              ],
            ),
            title: new Text('Tabs Demo'),
          ),
          body: new TabBarView(
            children: [
              new Icon(Icons.directions_car),
              new Icon(Icons.directions_transit),
              new Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

Mais voici la chose, je veux obtenir l'index des onglets actifs afin que je puisse appliquer une logique sur certains onglets. Je recherche la documentation mais je n'ai pas pu la comprendre. Pouvez-vous aider et merci?

fluttertabcontrolflutter-layout
7
Toni Joe

L'intérêt de DefaultTabController est de gérer les onglets par lui-même.

Si vous souhaitez une gestion personnalisée des onglets, utilisez plutôt TabController . Avec TabController vous avez accès à beaucoup plus d'informations, y compris l'index actuel.

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => new _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: myTabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        bottom: new TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: myTabs.map((Tab tab) {
          return new Center(child: new Text(tab.text));
        }).toList(),
      ),
    );
  }
}
18
Rémi Rousselet

Dans ce cas, l'utilisation de StatefulWidget et State n'est pas une bonne idée.

Vous pouvez obtenir l'index actuel par DefaultTabController.of(context).index;.

Suivez le code:

...
appBar: AppBar(
  bottom: TabBar(
    tabs: [
      Tab(~), Tab(~)
    ]
  ),
  actions: [
    // At here you have to get `context` from Builder.
    // If you are not sure about this, check InheritedWidget document.
    Builder(builder: (context){
      final index = DefaultTabController.of(context).index;   
      // use index at here... 
    })
  ]
)
8
google ogiwara

Vous pouvez accéder à l'index en cours lorsque l'onglet est sélectionné par l'événement onTap de TabBar.

TabBar(
    onTap: (index) {
      //your currently selected index
    },

    tabs: [
      Tab1(),
      Tab2(),
    ]);
2
Usman

Appliquez simplement un écouteur sur le TabController.

// within your initState() method
_tabController.addListener(_setActiveTabIndex);

void _setActiveTabIndex() {
  _activeTabIndex = _tabController.index;
}
1
CoastalB

Grâce à l'exemple de Rémi Rousselet, vous pouvez le faire, le code comme celui-ci:

_tabController.index

Cela renverra l'index actuel de la position de votre TabBarView

0
AlexPad