在Flutter中使用具有不同选项卡的不同FAB，并在它们之间滑动时更改按钮？

在Flutter中，你可以使用StatefulWidget和IndexedStack来实现具有不同选项卡的不同浮动操作按钮（FAB），并在它们之间滑动时更改按钮。以下是一个简单的示例：

首先，确保你已经在pubspec.yaml文件中添加了flutter依赖。
创建一个新的Flutter项目，然后在lib/main.dart文件中替换以下代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FAB with Tabs Example'),
        ),
        body: MyTabs(),
      ),
    );
  }
}

class MyTabs extends StatefulWidget {
  @override
  _MyTabsState createState() => _MyTabsState();
}

class _MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
  int _currentIndex = 0;
  final List<Widget> _tabs = [
    Tab(icon: Icon(Icons.directions_car)),
    Tab(icon: Icon(Icons.directions_transit)),
    Tab(icon: Icon(Icons.directions_bike)),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: _tabs.length,
      child: Column(
        children: [
          TabBar(
            tabs: _tabs,
            onTap: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
          ),
          Expanded(
            child: IndexedStack(
              index: _currentIndex,
              children: [
                CarTab(),
                TransitTab(),
                BikeTab(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class CarTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Center(child: Text('Car Tab')),
    );
  }
}

class TransitTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(child: Text('Transit Tab')),
    );
  }
}

class BikeTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(child: Text('Bike Tab')),
    );
  }
}

在这个示例中，我们创建了一个名为MyTabs的StatefulWidget，它包含一个DefaultTabController，用于管理选项卡。我们还创建了三个不同的选项卡：CarTab、TransitTab和BikeTab。

我们使用IndexedStack来根据当前选中的选项卡显示相应的页面。当用户点击选项卡时，onTap回调会更新_currentIndex，从而切换IndexedStack中的页面。

要在滑动时更改FAB，你可以使用PageView.builder替换IndexedStack，并在onPageChanged回调中更新_currentIndex。然后，你可以根据_currentIndex显示相应的FAB。

这是一个使用PageView.builder的示例：

class MyTabs extends StatefulWidget {
  @override
  _MyTabsState createState() => _MyTabsState();
}

class _MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
  int _currentIndex = 0;
  final List<Widget> _tabs = [
    Tab(icon: Icon(Icons.directions_car)),
    Tab(icon: Icon(Icons.directions_transit)),
    Tab(icon: Icon(Icons.directions_bike)),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: _tabs.length,
      child: Column(
        children: [
          TabBar(
            tabs: _tabs,
            onTap: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
          ),
          Expanded(
            child: PageView.builder(
              itemCount: _tabs.length,
              onPageChanged: (index) {
                setState(() {
                  _currentIndex = index;
                });
              },
              itemBuilder: (context, index) {
                return index == 0 ? CarTab() : index == 1 ? TransitTab() : BikeTab();
              },
            ),
          ),
        ],
      ),
    );
  }
}

现在，当你在选项卡之间滑动时，_currentIndex会更新，从而显示相应的FAB。你可以根据_currentIndex在Scaffold的floatingActionButton属性中显示不同的FAB。

例如：

Scaffold(
  appBar: AppBar(
    title: Text('FAB with Tabs Example'),
  ),
  body: MyTabs(),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // 根据 _currentIndex 执行相应的操作
    },
    child: Icon(_currentIndex == 0 ? Icons.directions_car : _currentIndex == 1 ? Icons.directions_transit : Icons.directions_bike),
  ),
);

这样，你就可以在Flutter中实现具有不同选项卡的不同FAB，并在它们之间滑动时更改按钮。