将 Appbar 上的操作按钮用作选项卡。(Flutter)

Posted 2023-02-23

【中文标题】将 Appbar 上的操作按钮用作选项卡。(Flutter)

【英文标题】：Using action buttons on Appbar as tabs.(Flutter)

【发布时间】：2019-06-07 13:09:06

【问题描述】：

[在此处输入图片描述][1]我一直在做一个项目。我在 Appbar 上有三个操作按钮，我想使用与带有指示器的同一 Appbar 上的选项卡相同的按钮。我怎样才能做到这一点？

[1]：示例视图。 https://i.stack.imgur.com/2beQx.png

【问题讨论】：

到目前为止你做了什么？

查看最近添加的图片链接。上面的三个操作按钮需要用作选项卡。

使用制表符可以吗？

【参考方案1】：

TabController tabController;
final selectedColor = Colors.red;
int currentTab;
@override
void initState() 
  super.initState();
  tabController = TabController(length: 3, vsync: this);
  currentTab = 0;



//add this function to your build function.

void goTo(int index)
  this.tabController.animateTo(index);
  setState(() 
    this.currentTab = index;
  );


// and in your Scaffold:

appBar: AppBar(
        title: Text("Test page 1"),
        actions: [
          IconButton(
            icon: Icon(Icons.storage, color: currentTab == 0 ? selectedColor : Colors.white,),
            onPressed: () 
              goTo(0);
            ,
          ),
          IconButton(
            icon: Icon(Icons.account_box, color: currentTab == 1 ? selectedColor : Colors.white,),
            onPressed: () 
              goTo(1);
            ,
          ),
          IconButton(
            icon: Icon(Icons.shopping_basket, color: currentTab == 2 ? selectedColor : Colors.white,),
            onPressed: () 
              goTo(2);
            ,
          )
        ],
      ),


body: TabBarView(
        controller: tabController,
        children: <Widget>[
          Container(
            child: Icon(Icons.storage),
          ),
          Container(
            child: Icon(Icons.account_box),
          ),
          Container(
            child: Icon(Icons.shopping_basket),
          )
        ],
      ),

【讨论】：

我们能否像使用标签一样在这些操作按钮上显示指示器（在选定的标签颜色上）？

@DeepShah 修改了答案。

@DeepShah 你能回复吗？？