美文网首页
BottomNavigationBarItem 设置图片和文字的

BottomNavigationBarItem 设置图片和文字的

作者: follow_er | 来源:发表于2022-07-12 15:57 被阅读0次

    解决方法: 在icon上添加padding
    代码示例:

    class _BusinessTabbarPageState extends State<BusinessTabbarPage> {
      int currentIndex;
      Widget currentPage;
      final List _tabs = [
        BusinessListPage(),
        HighSeasBusinessListPage(),
      ];
    
      final List<BottomNavigationBarItem> _bottomTabs = [
        //icon部分的设置!!!!
        BottomNavigationBarItem(
            icon:Padding(padding: EdgeInsets.all(8),
            child: Image.asset("assets/images/business_unSelected.png",fit: BoxFit.cover,width: 25,height: 25)),
            activeIcon:Padding(padding: EdgeInsets.all(8),
            child: Image.asset("assets/images/business_Selected.png",fit: BoxFit.cover,width: 25,height: 25)),
            title:Text('我的商机')
        ),
        BottomNavigationBarItem(
            icon:Padding(padding: EdgeInsets.all(8),
            child: Image.asset("assets/images/business_unSelected.png",fit: BoxFit.cover,width: 25,height: 25)),
            activeIcon:Padding(padding: EdgeInsets.all(8),
            child: Image.asset("assets/images/business_Selected.png",fit: BoxFit.cover,width: 25,height: 25)),
            title:Text('公海商机'),
        )
      ];
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        currentIndex = widget.currentIndex;
        currentPage = _tabs[currentIndex];
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
            bottomNavigationBar: BottomNavigationBar(
              type:BottomNavigationBarType.fixed,
              currentIndex: currentIndex,
              items:_bottomTabs,
              onTap: (index){
                setState(() {
                  currentIndex = index;
                  currentPage = _tabs[currentIndex];
                });
              },
              fixedColor: AppColor.blue,
              selectedLabelStyle: TextStyle(
                  color:  AppColor.blue,
                  fontWeight: FontWeight.w600,
                  fontSize: 14.0
              ),
              unselectedLabelStyle: TextStyle(
                  color:  Colors.black,
                  fontWeight: FontWeight.w600,
                  fontSize: 14.0
              ),
            ),
            body:currentPage
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:BottomNavigationBarItem 设置图片和文字的

          本文链接:https://www.haomeiwen.com/subject/pydabrtx.html