Question

[在此处输入图片描述] [1]我一直在做一个项目。我在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上的操作按钮用作选项卡。

1 个答案: