flutter控件----滑动图片背景的TabBar+TabBarView实现

2019-05-24 20:52:49 阅读：480 来源： 互联网

标签：控件 fit TabBarView width asset TabBar images BoxFit

一、概述

项目要求实现以下效果：
TabBar选中状态有一个背景图片，TabBarView翻页的时候会跟随移动。
在这里插入图片描述
本来想直接使用TabBar的indicator自定义为一个背景图片，这样就能非常方便的完成效果，结果发现可以自定义为带边框的Decoration，但是不能自定义为图片，否则就会报错。
然而自定义view实现起来又不是特别容易和方便，于是乎就想直接在TabBar外边加一个会移动的图片不就好了吗，既方便又快捷，真是完美呢哈哈哈

二、开始编码

主要思想就是在TabBar外层加一个可以移动的选中背景，废话不多说，直接上代码：

///时间选择
  Widget _timeSelection() {
    double width = MediaQuery.of(context).size.width;
    return Stack(
      alignment: Alignment.topLeft,
      children: <Widget>[
        /// 固定整个布局的高，否则选中时间背景显示不全
        Container(
          height: 55,
        ),

        /// 未选中时间背景色
        Container(
          height: 55 - 5.0,
          color: Colors.black,
        ),

        /// 选中时间背景图片
        Positioned(
          width: width / 6,
          height: 55,
          left: _timeTabController.animation.value * width / 6,
          child: Image.asset(
            "images/time_selected_bg.png",
            fit: BoxFit.fill,
          ),
        ),
        TabBar(
          labelPadding: EdgeInsets.all(0),
          tabs: timeTabs,
          controller: _timeTabController,
          isScrollable: false,
          indicatorColor: Colors.transparent,
        )
      ],
    );
  }

然后直接跟TabBarView配对使用就好了：

@override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _timeSelection(),
        Expanded(
            child:
                TabBarView(controller: _timeTabController, children: <Widget>[
          Image.asset(
            "images/bg1.jpg",
            fit: BoxFit.fill,
          ),
          Image.asset(
            "images/bg2.jpg",
            fit: BoxFit.fill,
          ),
          Image.asset(
            "images/bg.jpg",
            fit: BoxFit.fill,
          ),
          Image.asset(
            "images/bg1.jpg",
            fit: BoxFit.fill,
          ),
          Image.asset(
            "images/bg2.jpg",
            fit: BoxFit.fill,
          ),
          Image.asset(
            "images/bg.jpg",
            fit: BoxFit.fill,
          )
        ]))
      ],
    );
  }

这样基本样式就完成了，但还有重要一步没有实现，那就是随着TabBarView的翻页动作，TabBar选中背景图片跟随移动。
这个就更好解决了，flutter的ScrollView可是直接给我们提供了滚动控制器，想怎么移动就怎么移动，想跟谁一块移动就跟谁一块移动，真是不要太方便：
全局定义一个TabController，然后让TabBar和TabBarView都使用这个TabController，选中的TabBar背景图片根据TabController的动画效果实时重绘就行了

@override
  void initState() {
    super.initState();
    _timeTabController =
        TabController(vsync: this, initialIndex: 0, length: timeTabs.length);
    ///监听TabController的动画，实时刷新，这样选中背景就能跟随移动了
    _timeTabController.animation.addListener(() {
      setState(() {});
    });
  }

/// 选中时间背景图片
        Positioned(
          width: width / 6,
          height: 55,
          ///一行有6个Tab，每次移动的距离=当前移动到的位置*单个tab的宽
          left: _timeTabController.animation.value * width / 6,
          child: Image.asset(
            "images/time_selected_bg.png",
            fit: BoxFit.fill,
          ),
        ),

三、总结

想了好多种解决办法，发现这种方法是最简单快捷的一种方式。如果有人能用其他更好的办法解决，希望谁可以告诉我一声，毕竟也都是在学习flutter阶段，大家共同加油。

源码下载

标签：控件,fit,TabBarView,width,asset,TabBar,images,BoxFit
来源： https://blog.csdn.net/S43565442/article/details/86477380

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

flutter控件----滑动图片背景的TabBar+TabBarView实现

一、概述

二、开始编码

三、总结