浮动动作按钮在不同选项卡上显示/隐藏

Question

在flutter中，我有2个标签页显示不同的视图。我想让floatactionbutton仅在视图之一中显示而在其他选项卡中隐藏。但是即使在切换视图时，floatingactionbutton仍保持浮动。谁可以帮我这个事？如果有任何代码或教程，将不胜感激。

Answer 1

您可以为每个页面创建一个 FloatingActionButton 列表。调用 TabController 变量上的 index 方法来了解活动选项卡的索引，并使用它从列表中选择一个 fab。不要忘记对 TabController 变量调用 addListener。

这是我如何做到这一点的代码片段：

// 在主 StatefulWidget 类中

 TabController tabController;
 var fabIndex;
 @override
 void initState() {
   super.initState();
   tabController = new TabController(length: 3, vsync: this,initialIndex: 0);
   tabController.addListener(_getFab);
   fabIndex=0;
 }

 void dispose() {
   tabController.dispose();
   super.dispose();
 }

final List<FloatingActionButton> fabs=[
  new FloatingActionButton(child: new Icon(Icons.access_time),onPressed: (){},),
  new FloatingActionButton(child: new Icon(Icons.account_balance),onPressed: (){},),
  new FloatingActionButton(child: new Icon(Icons.add_alert),onPressed: (){},)
];

void _getFab(){
  setState((){`enter code here`
    fabIndex=tabController.index;
  });
}

使用脚手架的 floatActionButton 属性中的 fabIndex，如下所示：

  floatingActionButton: fabs[fabIndex],

Answer 2

演示图片：
tab1显示晶圆厂
tab2隐藏晶圆厂

您可以在时_selectedIndex == 0将floatActionButton 设置为null ，然后FAB随动画一起消失，非常酷。并记住要更改_selectedIndexBottomNavigationBar的onTap方法。

这是带有一些注释的示例代码：

final _tabTitle = [
  'Title 1',
  'Title 2'
]; // BottomNavigationBarItem title

final _tabIcon = [
  Icon(Icons.timer_off),
  Icon(Icons.timeline),
]; // BottomNavigationBarItem icon

class _MyHomePageState extends State<MyHomePage> {

  int _selectedIndex = 0;
  String title = _tabTitle[0];

  // tap BottomNavigationBar will invoke this method
  _onItemTapped(int index) {
    setState(() {
      // change _selectedIndex, fab will show or hide
      _selectedIndex = index;      
      // change app bar title     
      title = _tabTitle[index];
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: Center(
        child: Text(_tabTitle[_selectedIndex]),
      ),
      // two tabs
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(title: Text(_tabTitle[0]), icon: _tabIcon[0]),
          BottomNavigationBarItem(title: Text(_tabTitle[1]), icon: _tabIcon[1])
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
      // key point, fab will show in Tab 0, and will hide in others.
      floatingActionButton: _selectedIndex == 0 ? FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ) : null,
    );
  }
}