不同选项卡上的 floatingactionbutton show/hide

Question

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

Answer 1

您可以为每个页面创建一个 FloatingActionButtons 列表。在 TabController 变量上调用 index 方法以了解活动选项卡的索引，并将其用于 select 列表中的 fab。不要忘记在 TabController 变量上调用 addListener。

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

// 在主状态小部件中 class

 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;
  });
}

在脚手架的floatingActionButton属性中使用fabIndex如下：

  floatingActionButton: fabs[fabIndex],

Answer 2

演示图片：
tab1 show fab
tab2 hide fab

_selectedIndex == 0时可以将floatingActionButton设置为null，FAB就没有动画了，爽。并记住在 BottomNavigationBar onTap 方法中更改 _selectedIndex。

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

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,
    );
  }
}

Answer 3

我会用脚手架包裹你想要的标签，然后给它一个工厂。

TabBarView(
  children:[
     Text("tab1"),
     Scaffold(body:Text("tab2"),
              floatingActionButton: FloatingActionButton(...)
     )
)

不同选项卡上的 floatingactionbutton show/hide

floatingactionbutton show/hide on different tabs

flutter