新贵 Flutter TabBar(12)

flutter

今天分享有一个 Flutter 导航利器 TabBar，下图是我们想要实现一个小应用，这个页面功能是记录 baby 喝奶的事件，然后根据设置计算出下一次喝奶的事件，以及喝奶的量。页面顶部就是使用 TabBar 来切换页面进行导航的。

屏幕快照 2019-06-30 下午7.55.09.png

                      TabBar(
                        indicator: UnderlineTabIndicator(
                            borderSide: BorderSide(
                                color: Color(0xffff0863), width: 4.0),
                            insets: EdgeInsets.fromLTRB(40.0, 20.0, 40.0, 0)),
                        indicatorWeight: 15,
                        indicatorSize: TabBarIndicatorSize.label,
                        labelColor: Color(0xff2d386b),
                        labelStyle: TextStyle(
                            fontSize: 12,
                            letterSpacing: 1.3,
                            fontWeight: FontWeight.w500),
                        unselectedLabelColor: Colors.black26,
                        tabs: <Widget>[
                          Tab(
                            text: "ALARMS",
                            icon: Icon(
                              Icons.watch,
                              size: 40,
                            ),
                          ),
                          Tab(
                            text: "RECORDS",
                            icon: Icon(
                              Icons.menu,
                              size: 40,
                            ),
                          ),
                          Tab(
                            text: "PROFILE",
                            icon: Icon(
                              Icons.supervised_user_circle,
                              size: 40,
                            ),
                          )
                        ],
                      )

从结构上看，TabBar 是由一个一个 Tab 组成的，而且有一个指示器用于表示当前选中的 Tab。
indicator 可以定义指示器样

body: TabBarView(
            children: <Widget>[
              Center(
                child: AlarmTabPage(),
              ),
              Center(
                child: GuessTagPage(),
              ),
              Text("third Screen")
            ],
          ),

然后就可以简单地在 body 属性中给出对应页面，这样一来就完成 tab 导航的效果。看起来不难吧。快速直观开发出相对复杂页面是我喜欢 Flutter 的原因。