Question

在fluter中，我有两个显示不同视图的标签页。我想让floatingactionbutton只在一个视图中显示并隐藏在其他选项卡中。但即使切换视图，浮动按钮也会保持浮动状态。谁可以帮我这个事？如果有任何代码或教程，我们将不胜感激。

Answer 1

您可以为每个页面创建一个FloatingActionButtons列表。在TabController变量上调用索引方法以了解活动选项卡的索引，并使用该索引从列表中选择fab。别忘了在TabController变量上调用addListener。

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

//在主statefulwidget类中

is

在scaffold的floatingActionButton属性中使用fabIndex，如下所示：

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

Answer 2

演示图片：
tab1 show fab
tab2 hide fab

您可以在_selectedIndex == 0时将floatActionButton设置为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,
    );
  }
}

floatingactionbutton显示/隐藏在不同的选项卡上

2 个答案: