flutter中添加没有appbar的Tabbar

一、appbar中添加Tabbar.

appbar中添加Tabbar这种使我们常见的场景。

class NewsPage extends StatefulWidget {
  @override
  _NewsState createState() => _NewsState();
}

class _NewsState extends State<NewsPage> with TickerProviderStateMixin{
  List<String> _tabs = ["历史", "新闻", "军事", "搞笑",'美图','视频',"经济","推荐"];
  late TabController _tabController;

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("新闻列表"),
        bottom: TabBar(
          unselectedLabelColor: Colors.black,
          indicatorColor: Colors.red,
          labelColor: Colors.red,
          indicatorSize: TabBarIndicatorSize.tab,
          indicatorWeight: 3.0, //底部高度
          indicatorPadding: EdgeInsets.all(10),
          controller: _tabController,
          isScrollable: true, // Tabbar是否可水平滚动,false
          physics: BouncingScrollPhysics(),
          dragStartBehavior: DragStartBehavior.start, // 默认start 更为平滑
          tabs: _tabs.map((e) {
            return Tab(text: e);
          }).toList(),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: _tabs.map((e) {
          return Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: Text(e),
          );
        }).toList(),
      ),

    );
  }
}

正常

二、没有appbar的Tabbar

这一种方式更加的灵活，也是在应用中更常用的界面。

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo>
    with TickerProviderStateMixin {
  late TabController _tabController;
  var _tabs = ["热门", "推荐", "图片", "科技", "小视频","热门", "推荐", "图片", "科技", "小视频"];

  @override
  void initState() {
// TODO: implement initState
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [          Image.network('https://img0.baidu.com/it/u=4071201799,223427537&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=218'),
          Container(
            child: Column(
              children: [
                Container(
                  height: 50,
                  child: TabBar(
                    tabs: _tabs.map((e){
                      return Tab(text: e,);
                    }).toList(),
                    unselectedLabelColor: const Color(0xffacb3bf),
                    indicatorColor: Color(0xFFffac81),
                    labelColor: Colors.black,
                    indicatorSize: TabBarIndicatorSize.tab,
                    indicatorWeight: 3.0, //底部高度
                    indicatorPadding: EdgeInsets.all(10),
                    controller: _tabController,
                    isScrollable: true, // Tabbar是否可水平滚动,false
                    physics: BouncingScrollPhysics(),
                    dragStartBehavior: DragStartBehavior.start, // 默认start 更为平滑
                  ),
                ),
                Container(
                  color: Colors.orange,
                  height: 400,
                  child: TabBarView(
                    controller: _tabController,
                      children: _tabs.map((e){
                        return Center(child: Text(e,style: TextStyle(fontSize: 100),),);
                      }).toList()
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
  }

自定义Tabbar位置