Floatingactionbutton afficher/masquer sur différents onglets

Question

Dans fluter, j'ai 2 onglets qui affichent des vues différentes. Je voulais que le bouton d'action flottant s'affiche uniquement dans l'une des vues et soit masqué dans les autres onglets. Mais le bouton d'action flottant reste flottant même lorsque la vue est changée. Est-ce que quelqu'un peut m'aider sur ce point ? Si vous avez du code ou un tutoriel, ce serait apprécié.

Answer 1

Demo pic:
tab1 show fab
tab2 hide fab

Vous pouvez définir floatingActionButton sur null lorsque _selectedIndex == 0, puis FAB disparaît avec une animation, tellement cool. Et n'oubliez pas de changer _selectedIndex dans la méthode onTap de BottomNavigationBar.

Voici un exemple de code avec quelques commentaires :

final _tabTitle = [
  'Titre 1',
  'Titre 2'
]; // Titre de BottomNavigationBarItem

final _tabIcon = [
  Icon(Icons.timer_off),
  Icon(Icons.timeline),
]; // Icône de BottomNavigationBarItem

class _MyHomePageState extends State {

  int _selectedIndex = 0;
  String title = _tabTitle[0];

  // Appuyer sur BottomNavigationBar invoquera cette méthode
  _onItemTapped(int index) {
    setState(() {
      // changer _selectedIndex, fab sera affiché ou caché
      _selectedIndex = index;      
      // changer le titre de la barre d'application     
      title = _tabTitle[index];
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: Center(
        child: Text(_tabTitle[_selectedIndex]),
      ),
      // deux onglets
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(title: Text(_tabTitle[0]), icon: _tabIcon[0]),
          BottomNavigationBarItem(title: Text(_tabTitle[1]), icon: _tabIcon[1])
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
      // point clé, fab sera affiché dans l'onglet 0, et sera caché dans les autres.
      floatingActionButton: _selectedIndex == 0 ? FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ) : null,
    );
  }
}

Answer 2

Vous pouvez créer une liste de FloatingActionButtons pour chaque page. Appelez la méthode index sur la variable TabController pour connaître l'index de l'onglet actif et utilisez-le pour sélectionner un fab dans la liste. N'oubliez pas d'appeler addListener sur la variable TabController.

Voici un extrait du code que j'ai utilisé :

// dans la classe main statefulwidget

 TabController tabController;
 var fabIndex;
 @override
 void initState() {
   super.initState();
   tabController = new TabController(length: 3, vsync: this,initialIndex: 0);
   tabController.addListener(_getFab);
   fabIndex=0;
 }

 void dispose() {
   tabController.dispose();
   super.dispose();
 }

final List fabs=[
  new FloatingActionButton(child: new Icon(Icons.access_time),onPressed: (){},),
  new FloatingActionButton(child: new Icon(Icons.account_balance),onPressed: (){},),
  new FloatingActionButton(child: new Icon(Icons.add_alert),onPressed: (){},)
];

void _getFab(){
  setState((){`enter code here`
    fabIndex=tabController.index;
  });
}

Utilisez le fabIndex dans la propriété floatingActionButton du scaffold comme suit :

  floatingActionButton: fabs[fabIndex],