Flutter TabController 自定义位置

要用到TabController  在网上查了一些 都是写在AppBar中的 想要菜单选择的item 可以放在随意位置  TabBar 和 TabBarView 都放在body中就行了

一 ,定义 _tabcontroller

要继承 with SingleTickerProviderStateMixin 动画用 不然 vsync: this报错

```

TabController _tabcontroller;

  @override

  void initState() {

    // TODO: implement initState

    super.initState();

    _tabcontroller = TabController(length: 2 , vsync: this);

  }


在scaffold 的body中实现就好了

Scaffold(

        appBar: AppBar(

          title:Text('自定义的appbar'),

        ),


        body: Container(

            child: Column(

                children: [

                  Container(

                    //这个是选择的item

                    //要给个高度 内容Container也要给个高度 来适应屏幕高度

                    height: 30,

                    color: Colors.purple,

                    child: TabBar(

                      isScrollable: true,

                      controller: this._tabcontroller,

                      tabs: [

                        Tab(text:'第一个item'),

                        Tab(text:'第二个item'),

                      ]

                    ),

                  ),

                  Container(

                    //这个是显示内容的视图

                    //给个高度高度一定要给 不然报错

                    height: 100,

                    child: TabBarView(

                      controller: this._tabcontroller,

                      children: [

                        Text('第一个内容视图'),

                        Text('第二个内容视图')

                      ]

                    ),

                  )

                ],

            ),   

        ),

    );

```

你可能感兴趣的:(Flutter TabController 自定义位置)