Flutter创建TabBar和可滑动的顶部分页

Flutter搭建一个基本的app架构，tabBar + navgationBar + views

1.首先理清思路，创建tabBar -> 选中第一个标签 -> 进入第一个子页面 -> 创建nagationBar -> 创建顶部分页tab

2. 创建tabBar，找到main函数入口，创建一个类命名为自定义的tabBarController，将它作为函数的返回值。

void main () => runApp(LiveApp());

class LiveApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CYTabBarController();
  }
}

大概就是这样，这样我们就创建好了一个入口。

2.来到这个新建的文件，实现一个Widget MaterialApp里面的属性主要使用home：Widget。

class CYTabBarController extends StatefulWidget {
  @override
  _CYTabBarControllerState createState() => _CYTabBarControllerState();
}

class _CYTabBarControllerState extends State<CYTabBarController> {

  @override
  

  @override
  Widget build(BuildContext context) {
    return MaterialApp( 
       home: ,
    );
  }

}

接下来就是要给这个home一个函数返回值为Widget或者直接赋值Widget。

这里给一个Scaffold Widget，Scaffold 的主要用到的有appBar，body，title，bottomNavigationBar，

appBar 就是导航栏，title等价于导航栏上的居中的view，你可以自定一个Widget赋值给它，body是你需要显示的内容，bottomNavigationBar就是底部的tabBar了。

3.实现tabBar

一种做法是用tabBarView，这样效果就是可以左右滚动，需要创建一个TabController，它是负责管理tabView的。

另一种做法就是用bottomNavigationBar，这个是不可以滚动的，也不需要TabController去管理。

这里我选择用bottomNavigationBar去做，具体做法看个人的喜好。

BottomNavigationBar 需要实现一个items，就是BottomNavigationBarItem的数组，有多少了tab标签就创建多少个。

items: [BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
                   BottomNavigationBarItem(icon: Icon(Icons.live_tv),title: Text('直播')),
                   BottomNavigationBarItem(icon: Icon(Icons.find_in_page),title: Text('发现')),
                   BottomNavigationBarItem(icon: Icon(Icons.my_location),title: Text('我的')),],

这里我创建了4个item。

看一下源码，需要哪些参数和可以设置哪些参数

BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.elevation = 8.0,
    BottomNavigationBarType type,
    Color fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme = const IconThemeData(),
    this.unselectedIconTheme = const IconThemeData(),
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels = true,
    bool showUnselectedLabels,
  })

这些都是常用的可设置，@required 是必须赋值的，具体用法看字面意思就知道了，这里不去介绍。

来看看具体的实现

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: [BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
                   BottomNavigationBarItem(icon: Icon(Icons.live_tv),title: Text('直播')),
                   BottomNavigationBarItem(icon: Icon(Icons.find_in_page),title: Text('发现')),
                   BottomNavigationBarItem(icon: Icon(Icons.my_location),title: Text('我的')),],
          currentIndex: currentIndex,
          selectedFontSize: 13,
          unselectedFontSize: 13,
          selectedItemColor: Colors.green,
          onTap: (index) {
            setState(() {
              currentIndex = index;
            });
          },
        )

有一个index很重要，就是你点击返回给你的按钮下标，通过StatefulWidget 的setState 可以监听它的改变然后做出相应的调整。

4.创建一个IndexedStack的Widget，它有一个children和index属性，我们将需要显示的界面先创建好导入，然后放入children里面，index赋值当前选中的下标，这样做的好处是不用每次都去渲染。

Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: [BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('首页')),
                   BottomNavigationBarItem(icon: Icon(Icons.live_tv),title: Text('直播')),
                   BottomNavigationBarItem(icon: Icon(Icons.find_in_page),title: Text('发现')),
                   BottomNavigationBarItem(icon: Icon(Icons.my_location),title: Text('我的')),],
          currentIndex: currentIndex,
          selectedFontSize: 13,
          unselectedFontSize: 13,
          selectedItemColor: Colors.green,
          onTap: (index) {
            setState(() {
              currentIndex = index;
            });
          },
        ),
        body: IndexedStack(
          children: <Widget>[
            HomeView(),
            LiveView(),
            DiscoverView(),
            MyZoneView(),
          ],
          index: currentIndex,
        ),
      ),
      
    );
  }

看看具体的效果

 

5.创建一个滑动的tab分页。

来到首页你创建的类里面，大概是这样

class HomeView extends StatefulWidget {
  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('首页',style: TextStyle(fontSize: 18)),
      ),
    );
  }
}

这里需要用到的Widget主要有Scaffold，TabBar，TabBarView，用到了tabBar和TabBarView首先就要创建一个TabController，

用来管理它们。

这里要用到一个initState()和dispose()函数，一个用来创建，一个用来销毁。

在initState()函数里面将TabController 创建好。

 void initState() {
    // TODO: implement initState
    tabController = TabController(
      length: 3,
      vsync: this,
    );
    super.initState();

  }

length是需要管理的tab数组长度，vsync就简单理解为发送一个同步信号，这里要渲染了。

对应的dispose()里面

@override
  void dispose() {
    // TODO: implement dispose
    tabController.dispose();
    super.dispose();
  }

创建的步骤和上面类似，如下

@override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text('首页',style: TextStyle(fontSize: 22),),
        bottom: TabBar(
          indicatorColor: Colors.white,
          indicatorSize: TabBarIndicatorSize.label,
          unselectedLabelStyle: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w500,
          ),

          unselectedLabelColor: Colors.white54,

          labelColor: Colors.white,

          labelStyle: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w500
          ),
          controller: tabController,
          tabs: <Widget>[
             Tab(text: '电影',),
             Tab(text: '读书',),
             Tab(text: '新闻',),
          ],

        ),
        
      ),
      body: TabBarView(
        controller: tabController,
        children: <Widget>[
          MoviesView(),
          BooksView(),
          NewsView(),
        ],
      ),
    );
  }

这样就创建好了一个分页滑动的tab。

demo下载地址：Flutter创建tabbar