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

一、概述

项目要求实现以下效果:
TabBar选中状态有一个背景图片,TabBarView翻页的时候会跟随移动。
flutter控件----滑动图片背景的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阶段,大家共同加油。

源码下载

上一篇:广告点击数实时统计:Spark StructuredStreaming + Redis Streams


下一篇:236Echarts - 3D 柱状图(Global Population - Bar3D on Globe)