flutter 自定义TabBar +自定义Indicator

最新推荐文章于 2024-11-27 11:14:22 发布

原创

最新推荐文章于 2024-11-27 11:14:22 发布 · 4.6k 阅读

10 ·

CC 4.0 BY-SA版权

主要是顶部TabBar+TabView的实现，左右滑动或者点击切换。先上效果图

给每个Tab有个初始的背景颜色，Indicator是粉色的框

首先初始Tab数据,构建初始背景颜色的时候，用到了颜色混合BlendMode，详情可以百度，为了选择时indicator能上色

//用于监听Tab菜单切换
  TabController _tabController;
  //Tab 标签
  List<Widget> _tabs;

_getTabData(){
    _tabs = [];
    int day = serverTime.day;
    int month = serverTime.month;

    for(int i = 0;i<7;i++){
      tabs.add(_getTabText(month, day++));
    }
  }

  //获取tab控件
  Widget _getTabText(int month,int day){
    String tag = "";
    if(( month == DateTime.now().month )&& (day == DateTime.now().day)){
      tag = "今天";
    }else if(( month == DateTime.now().month )&&(day-1) == DateTime.now().day){
      tag = "明天";
    }else{
      tag = "${month.toString()}月${day.toString()}日";
    }
    return  Container(
      child: Text(tag),
      decoration: