如何在 flutter 中使用 tabbar 作为底部导航栏

发布于01月17日

使用Tabbar作为底部导航栏，可以吗？

与底部栏相比，Tabbar的工作顺畅吗？

推荐答案

 DefaultTabController(
          length: 3,
          child: Scaffold(
            backgroundColor: ColorConstant.whiteColor,
            body: const TabBarView(
              children: [
                Container(),
                Container(),
                Container(),
              ],
            ),
            bottomNavigationBar: Container(
              height: 9.0.h,
              decoration: const BoxDecoration(
                color: ColorConstant.yellowColor,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(24),
                  topRight: Radius.circular(24),
                ),
              ),
              child: TabBar(
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorPadding: const EdgeInsets.all(12),
                indicator: BoxDecoration(
                  color: ColorConstant.lightYellowColor,
                  borderRadius: BorderRadius.circular(24),
                ),
                tabs: [
                  Tab(
                    child: Image.asset(homeIcon),
                  ),
                  Tab(
                    child: Image.asset(addPostIcon),
                  ),
                  Tab(
                    child: Image.asset(feedIcon),
                  ),
                ],
              ),
            ),
          ),
        );