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

Question

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

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

Answer 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),
          )
        ],
      ),

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

Using action buttons on Appbar as tabs.(Flutter)

android

dart

android-studio

flutter

flutter-layout