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

【问题标题】：How to use tabbar as a bottom navigation bar in flutter?如何在 flutter 中使用 tabbar 作为底部导航栏？
【发布时间】：2023-01-17 12:51:38
【问题描述】：

UI Image

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

与底部栏相比，标签栏工作顺畅吗？

【问题讨论】：

标签： flutter firebase dart user-interface

【解决方案1】：

 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),
                  ),
                ],
              ),
            ),
          ),
        );

【讨论】：