web-dev-qa-db-fra.com

Flutter: modification de l'onglet actuel dans la vue de la barre d'onglets à l'aide d'un bouton

Je crée une application qui contient une barre d'onglets sur sa page d'accueil. Je veux être capable de naviguer à l'un des onglets tiliser mon FloatingActionButton. De plus, je souhaite conserver les méthodes de navigation par défaut vers cet onglet, c’est-à-dire en balayant à l’écran ou en cliquant sur l’onglet.

Je veux aussi savoir comment lier cet onglet à un autre bouton.

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

Homepage with navigation tabs and floating action button

dartflutter
16
Sunit Gautam

Vous devez obtenir le contrôleur TabBar et appeler sa méthode animateTo() à partir du bouton onPressed() handle.

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 le MyTabbedPageState, vous pouvez obtenir le contrôleur de n’importe où, vous pouvez donc appeler la animateTo() 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 pouvez l'appeler de n'importe où en faisant:

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

31
chemamolins

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

PageController.jumpToPage(int)

Cependant, si vous avez besoin d'animation, vous utiliserez

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

Exemple simple le démontrant.

// 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
      ],
    ),
  );
}
0
CopsOnRoad