Flutter: la Modification de l'onglet de la barre des onglets de la vue à l'aide d'un bouton

Je suis entrain de créer une application qui contient une barre d'onglet sur sa page d'accueil. Je veux être en mesure de naviguer à l'un des onglets à l'aide de mon FloatingActionButton. En outre, je veux garder la valeur par défaut des méthodes d'accéder à cet onglet, c'est à dire en les faisant glisser sur l'écran ou en cliquant sur l'onglet.

Je veux aussi savoir comment faire le lien entre cet onglet à un autre bouton.

Voici une capture d'écran de ma page d'accueil.

Flutter: la Modification de l'onglet de la barre des onglets de la vue à l'aide d'un bouton

InformationsquelleAutor Sunit Gautam | 2018-06-16
  1. 34

    Vous avez besoin pour obtenir le TabBar contrôleur et appeler sa animateTo() méthode à partir du bouton onPressed() poignée.

    import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyTabbedPage(),
);
}
}
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(
title: new Text("Tab demo"),
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(),
),
floatingActionButton: new FloatingActionButton(
onPressed: () => _tabController.animateTo((_tabController.index + 1) % 2), //Switch tabs
child: new Icon(Icons.swap_horiz),
),
);
}
}

    Si vous utilisez un GlobalKey pour la MyTabbedPageState vous pouvez obtenir la manette à partir de n'importe quel endroit, de sorte que vous pouvez appeler la animateTo() à partir de n'importe quel bouton.

    class MyApp extends StatelessWidget {
static final _myTabbedPageKey = new GlobalKey<_MyTabbedPageState>();
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyTabbedPage(
key: _myTabbedPageKey,
),
);
}
}

    Vous pourriez l'appeler de n'importe où à faire:

    MyApp._myTabbedPageKey.currentState._tabController.animateTo(...);

    • Est-il de rappel de mise à jour tabView contenu de la page à partir d'autres stateful widget de retour d'appel du déclencheur.
    • Mais comment passer des données entre eux?
    InformationsquelleAutor chemamolins
  2. 0

    Si vous souhaitez accéder à une page spécifique, vous pouvez utiliser 

    PageController.jumpToPage(int)

    Toutefois, si vous avez besoin d'une animation, vous pouvez utiliser

    PageController.animateToPage(page, duration: duration, curve: curve)

    Exemple Simple illustrant il. 

    //create a PageController
final _controller = PageController();
bool _shouldAnimate = true; //whether we animate or jump
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_shouldAnimate) {
//animates to page1 with animation
_controller.animateToPage(1, duration: Duration(seconds: 1), curve: Curves.easeOut);  
} else {
//jump to page1 without animation
_controller.jumpToPage(1);
}
},
),
body: PageView(
controller: _controller, //assign it to PageView
children: <Widget>[
FlutterLogo(colors: Colors.orange), //page0
FlutterLogo(colors: Colors.green), //page1
FlutterLogo(colors: Colors.red), //page2
],
),
);
}
    InformationsquelleAutor CopsOnRoad
  3. 0

    chemamolin de l' la réponse ci-dessus est correct, mais pour des précisions supplémentaires/astuce, si vous voulez appeler votre tabcontroller "à partir de n'importe où", aussi assurez-vous que le tabcontroller n'est pas une propriété privée de la classe en supprimant le trait de soulignement, sinon le lointain de la classe ne sera pas en mesure de voir les tabcontroller avec l'exemple fourni, même lors de l'utilisation de la GlobalKey.

    En d'autres termes, le changement 

    TabController _tabController;

    à: 

    TabController tabController;

    et changement 

    MyApp._myTabbedPageKey.currentState._tabController.animateTo(...);

    à: 

    MyApp._myTabbedPageKey.currentState.tabController.animateTo(...);

    et partout ailleurs, vous faites référence à tabcontroller.

    InformationsquelleAutor FPI.MD