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

Posted 2023-02-22

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

【英文标题】：Use different FABs with different tabs in Flutter, and change buttons while swiping between them?

【发布时间】：2020-08-17 13:19:58

【问题描述】：

我正在尝试使用 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,
    ...
  );

问题是选项卡控制器侦听器似乎仅在选项卡切换完全完成时才被调用，而不是中途。如果用户从一个选项卡滑动到另一个选项卡，该选项卡将完全滑过，然后停止，然后按钮会发生变化。

有没有办法在滑动中间触发这个？

【参考方案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()),
        ));
  

【讨论】：

原始问题说就像材料设计指南一样，这种行为在规范中被列为“不要”。 “在标签之间切换时，FAB 不会与屏幕内容一致。”