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

Question

我正在尝试使用FAB设置选项卡，如Material Design guidelines.中所显示的那样

[通过在TabController上添加侦听器并在那里更改FAB，我几乎可以正常工作：

@override
void initState() {
  ...
  _tabController = TabController(
    length: 5,
    vsync: this,
  )..addListener(() {
      setState(() {
        _fabData = _fabDatas[_tabController.index];
      });
    });
  ...
}

@override
Widget build(BuildContext context) {
  final fab = _fabData == null
      ? null
      : FloatingActionButton(
          isExtended: _fabData.expanded,
          tooltip: _fabData.tooltip,
          child: Icon(_fabData.icon),
          onPressed: () {
            _fabData.onPressed(context);
          },
        );

  return Scaffold(
    ...
    floatingActionButton: fab,
    ...
  );
}

问题是，选项卡控制器侦听器似乎仅在选项卡开关已完全完成而不是中途完成时才被调用。如果用户从一个选项卡滑动到另一个选项卡，则选项卡将完全滑过，然后停下来，然后按钮将更改。

是否有方法可以在滑动中间触发此操作？

Answer 1

您不需要侦听器，请尝试以下方法：

import 'package:flutter/material.dart';

class TabControllerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tabs work',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _fabData = [
    'Tab1',
    'Tab2',
    'Tab3',
    'Tab4',
    'Tab5'
  ]; // Replace with your OBJECT!!!

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: _fabData.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
            bottom: TabBar(
              tabs: _fabData
                  .map((String t) => Tab(
                        text: t,
                      ))
                  .toList(),
            ),
          ),
          body: TabBarView(
              children: _fabData.map((String text) {
            return Container(
              child: Stack(
                children: [
                  Positioned(
                    bottom: 16,
                    right: 16,
                    child: FloatingActionButton(
                      // TODO USE YOUR Object
                      isExtended: true, //_fabData.expanded, 
                      //tooltip: _fabData.tooltip,
                      child: Icon(Icons.bookmark), //Icon(_fabData.icon),
                      onPressed: () {
                        //_fabData.onPressed(context);
                      },
                    ),
                  )
                ],
              ),
            );
          }).toList()),
        ));
  }
}