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

一、概述

项目要求实现以下效果：
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