如何在 tabview flutter 中使用相同的 floatingactionbutton 触发两个不同的代码？

Question

我正在处理一个 flutter 项目，在该项目中我需要使用相同的浮动操作按钮触发两个不同的代码：

这是我的选项卡视图：

appBar: AppBar(
      bottom: TabBar(indicator: BoxDecoration(
        color: Colors.black12, borderRadius: BorderRadius.circular(0),
      ),
        tabs: [
          Tab(text: 'Drivers'),
          Tab(text:'Cars')
        ],
        labelColor: Colors.pink,
      ),

我的标签栏视图：

body: TabBarView(
        children:[
          SingleChildScrollView(...),
          Center(child: Text('add car screen'))
        ]
    ),

和一个浮动按钮：

 floatingActionButton: FloatingActionButton(
      onPressed: () {
        // Add your onPressed code here!
      },

这是图片

我想要的是，无论何时选择“驱动程序”选项卡，然后按下浮动操作按钮，它都必须打印“已选择驱动程序选项卡”，每当我将选项卡切换到“汽车”选项卡时，然后按下按钮，它就会打印“汽车”选项卡已被选中。

Answer 1

尝试添加 DefaultTabController，reference:

int _currentIndex = 0;

        tabController.addListener(() {
          setState(() {
            _currentIndex = tabController.index;
          });
        });


 floatingActionButton: FloatingActionButton(
      onPressed: () {
        if(_currentIndex == 0) print('');
        else print('');
      },

Answer 2

将您的脚手架包裹在构建器中，然后您可以使用 DefaultTabController.of(context).index

检索选项卡索引

    import 'package:flutter/material.dart';  

  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: DefaultTabController(  
        length: 2,  
        child:  Builder(builder: (BuildContext context) {
          return Scaffold(  
          appBar: AppBar(  
            title: Text('Flutter Tabs Demo'),  
            bottom: TabBar(  
              tabs: [  
                Tab(icon: Icon(Icons.contacts), text: "Drivers"),  
                Tab(icon: Icon(Icons.camera_alt), text: "Cars")  
              ],  
            ),  
          ),  
           floatingActionButton: FloatingActionButton(
      onPressed: () {
        if(DefaultTabController.of(context)!.index==1)
        {
          print("drivers");
        }
        else
          print("cars");
         print(
                'Current Index: ${DefaultTabController.of(context)!.index}');
      },),
          body: TabBarView(  
            children: [  
              Center(child:Text("Driver")) ,
              Center(child:Text("Cars")) ,
            ],  
          ),  
        );
        }  
      ),  
    )
    );  
  }  
}

或者你也可以在TabBar中使用onTap方法

import 'package:flutter/material.dart';  

  
void main() => runApp(MyApp());  
  
class MyApp extends StatelessWidget {  
  
  int currentScreen=0;
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: DefaultTabController(  
        length: 2,  
        child: Scaffold(  
          appBar: AppBar(  
            title: Text('Flutter Tabs Demo'),  
            bottom: TabBar(  
              onTap:(index){
                currentScreen=index;
              },
              tabs: [  
                Tab(icon: Icon(Icons.contacts), text: "Drivers"),  
                Tab(icon: Icon(Icons.camera_alt), text: "Cars")  
              ],  
            ),  
          ),  
           floatingActionButton: FloatingActionButton(
      onPressed: () {
        if(currentScreen==0)
        {
          print("drivers");
        }
        else
          print("cars");
      },),
          body: TabBarView(  
            children: [  
              Center(child:Text("Driver")) ,
              Center(child:Text("Cars")) ,
            ],  
          ),  
        )
   ) );  
  }  
}

如何在 tabview flutter 中使用相同的 floatingactionbutton 触发两个不同的代码？

How to fire two diffrent code with same floatingactionbutton in tabview flutter?

dart

flutter

flutter-layout