欢迎光临
我们一直在努力

flutter 使用 bottomNavigationBar时只显示底部标签栏的第一项文字

按照教程结果直接运行发现效果不如预期,如下图所示

预料之外的预期效果

具体核心代码如下

@override
  Widget build(BuildContext context) {
    // 脚手架
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon( Icons.wifi_tethering, color: _BottomNavigationColor ),
            title: Text( '发现', style:TextStyle( color: _BottomNavigationColor )),
          ),
          BottomNavigationBarItem(
            icon: Icon( Icons.shopping_basket, color: _BottomNavigationColor ),
            title: Text( '购物', style:TextStyle( color: _BottomNavigationColor )),
          ),
          BottomNavigationBarItem(
            icon: Icon( Icons.notifications_active, color: _BottomNavigationColor ),
            title: Text( '消息', style:TextStyle( color: _BottomNavigationColor )),
          ),
          BottomNavigationBarItem(
            icon: Icon( Icons.person, color: _BottomNavigationColor ),
            title: Text( '我的', style:TextStyle( color: _BottomNavigationColor )),
          ),
        ],
      ),
    );
  }

发现并不是我们想要的,最终效果预期如下图所示

@override
  Widget build(BuildContext context) {
    // 脚手架
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon( Icons.wifi_tethering, color: _BottomNavigationColor ),
            title: Text( '发现', style:TextStyle( color: _BottomNavigationColor )),
          ),
          BottomNavigationBarItem(
            icon: Icon( Icons.shopping_basket, color: _BottomNavigationColor ),
            title: Text( '购物', style:TextStyle( color: _BottomNavigationColor )),
          ),
          BottomNavigationBarItem(
            icon: Icon( Icons.notifications_active, color: _BottomNavigationColor ),
            title: Text( '消息', style:TextStyle( color: _BottomNavigationColor )),
          ),
          BottomNavigationBarItem(
            icon: Icon( Icons.person, color: _BottomNavigationColor ),
            title: Text( '我的', style:TextStyle( color: _BottomNavigationColor )),
          ),
        ],
        // 新增该参数即可
        type: BottomNavigationBarType.fixed,
      ),
    );
  }

至此填坑完毕

填坑记

赞(0) 打赏
未经允许不得转载:卧龙岗 » flutter 使用 bottomNavigationBar时只显示底部标签栏的第一项文字
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏