web-dev-qa-db-fra.com

Comment sélectionner par programme l'onglet BottomNavigationBar dans Flutter au lieu du rappel intégré onTap?

J'ai travaillé avec BottomNavigationBar dans le flutter, mais je ne suis pas en mesure de sélectionner un onglet par programmation en dehors du rappel onTap de BottomNavigationBar.

Le code avec rappel onTap, qui fonctionne:

    return new BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    _bottomNavigationItem(Icons.account_circle, DrawerTitles.CONTACTS),
    _bottomNavigationItem(Icons.delete, DrawerTitles.DELETED_CONTACTS),
    _bottomNavigationItem(Icons.list, DrawerTitles.LOGS),
  ],
  onTap: (int index) {
    setState(() {
      navigationIndex = index;
      switch (navigationIndex) {
        case 0:
          handleBottomNavigationBarClicks(DrawerTitles.CONTACTS);
          break;
        case 1:
          handleBottomNavigationBarClicks(DrawerTitles.DELETED_CONTACTS);
          break;
        case 2:
          handleBottomNavigationBarClicks(DrawerTitles.LOGS);
          break;
      }
    });
  },
  currentIndex: navigationIndex,
  fixedColor: Colors.blue[400],
  type: BottomNavigationBarType.fixed,
);

Mais je veux changer les onglets en dehors du rappel onTap.

J'ai essayé de changer l'index utilisé par BottomNavigatioBar en dehors de callback onTap, mais cela n'a pas fonctionné.

Voici ce que j'ai essayé:

void changeTabs(int tabIndex) {
setState(() {
     navigationIndex = tabIndex;
});}

Voici un Gist pour le code.

Existe-t-il un moyen de modifier les onglets?

dartflutterbottomnavigationviewmaterial-components
7
Harsh Sharma

Voici un exemple complet sur la façon de réaliser ce que vous voulez.

import 'package:flutter/material.Dart';

void main() => runApp(new MyApp());

const String page1 = "Page 1";
const String page2 = "Page 2";
const String page3 = "Page 3";
const String title = "BNB Demo";

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: title,
      home: new MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> _pages;
  Widget _page1;
  Widget _page2;
  Widget _page3;

  int _currentIndex;
  Widget _currentPage;

  @override
  void initState() {
    super.initState();

    _page1 = Page1();
    _page2 = Page2();
    _page3 = Page3();

    _pages = [_page1, _page2, _page3];

    _currentIndex = 0;
    _currentPage = _page1;
  }

  void changeTab(int index) {
    setState(() {
      _currentIndex = index;
      _currentPage = _pages[index];
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: _currentPage,
      bottomNavigationBar: BottomNavigationBar(
          onTap: (index) => changeTab(index),
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
                title: Text(page1), icon: Icon(Icons.account_circle)),
            BottomNavigationBarItem(
                title: Text(page2), icon: Icon(Icons.account_circle)),
            BottomNavigationBarItem(
                title: Text(page3), icon: Icon(Icons.account_circle))
          ]),
      drawer: new Drawer(
        child: new Container(
          margin: EdgeInsets.only(top: 20.0),
          child: new Column(
            children: <Widget>[
              navigationItemListTitle(page1, 0),
              navigationItemListTitle(page2, 1),
              navigationItemListTitle(page3, 2),
            ],
          ),
        ),
      ),
    );
  }

  Widget navigationItemListTitle(String title, int index) {
    return new ListTile(
      title: new Text(
        title,
        style: new TextStyle(color: Colors.blue[400], fontSize: 22.0),
      ),
      onTap: () {
        Navigator.pop(context);
        changeTab(index);
      },
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(page1),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(page2),
    );
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(page3),
    );
  }
}

chaque fois que vous souhaitez passer à un onglet, appelez la changeTab(YOUR_TAB_INDEX)

4
Javid Noutash

Vous pouvez récupérer ce widget BottomAppBar en utilisant une GlobalKey. Par cette GlobalKey, vous pouvez gérer ce widget. Voici un résumé du code

Ici, vous attribuez une GlobalKey

GlobalKey globalKey = new GlobalKey(debugLabel: 'btm_app_bar');

Et mettez cette clé dans votre barre de navigation inférieure

new BottomNavigationBar(
    key: globalKey,
    items: [...],
   onTap: (int index) {...},
  ),

Vous pouvez maintenant appeler la méthode du widget

 final BottomNavigationBar navigationBar = globalKey.currentWidget;
 navigationBar.onTap(2);
13
Huy Hoàng