web-dev-qa-db-ja.com

Flutterで現在のタブインデックスを取得する方法

フラッターでは、タブレイアウトを簡単に実装できます。これは公式の 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),
            ],
          ),
        ),
      ),
    );
  }
}

しかし、ここにあるのは、アクティブなタブインデックスを取得して、特定のタブにロジックを適用できるようにすることです。ドキュメントを検索しましたが、理解できませんでした。助けてくれますか？

fluttertabcontrolflutter-layout
7
Toni Joe

DefaultTabControllerの要点は、タブを単独で管理することです。

カスタムタブ管理が必要な場合は、代わりに TabController を使用します。 TabControllerを使用すると、現在のインデックスを含むより多くの情報にアクセスできます。

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

この場合、StatefulWidgetとStateを使用することはお勧めできません。

DefaultTabController.of(context).index;で現在のインデックスを取得できます。

コードに従ってください：

...
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

TabBarのonTapイベントによってタブが選択されると、現在のインデックスにアクセスできます。

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

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

TabControllerにリスナーを適用するだけです。

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

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

RémiRousseletの例のおかげで、次のようなコードを実行できます。

_tabController.index

これは、TabBarViewの位置の現在のインデックスを返します

0
AlexPad