Giter VIP home page Giter VIP logo

flutter_appbar's Introduction

flutter_appbar

利用动画实现一个带背景图片的TabBar,TabBar选中状态有一个背景图片,TabBarView翻页的时候会跟随移动。 效果如下:

image image image

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,
        ///一行有6个Tab,每次移动的距离=当前移动到的位置*单个tab的宽
        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,
      )
    ],
  );
}

TabBar用文字做分隔符

Widget _tabBarItem(String title, {bool showRightImage = true}) {
  return Tab(
      child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Expanded(
        child: Center(
          child: Text(title),
        ),
      ),

      ///分割符自定义,可以放任何widget
      showRightImage
          ? Text('/', style: TextStyle(color: Color(0xffd0d0d0), fontSize: 23))
          : Text(' ', style: TextStyle(color: Color(0xffd0d0d0), fontSize: 23))
    ],
  ));
}

TabBar用自写任意控件做分隔符

Widget _tabBarItem(String title, {bool showRightImage = true}) {
  return Tab(
      child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Expanded(
        child: Center(
          child: Text(title),
        ),
      ),

      ///分割符自定义,可以放任何widget
      showRightImage
          ? Container(
              width: 1,
              margin: EdgeInsets.only(top: 15, bottom: 15),
              color: Colors.red,
            )
          : Container(
              width: 1,
              margin: EdgeInsets.only(top: 15, bottom: 15),
            )
    ],
  ));
}

TabBar用本地图片做分隔符

Widget _tabBarItem(String title, {bool showRightImage = true}) {
  return Tab(
      child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Expanded(
        child: Center(
          child: Text(title),
        ),
      ),

      ///分割符自定义,可以放任何widget
      showRightImage
          ? Container(
              width: 1,
              height: 15,
              child: Image.asset(
                'images/separator.png',
                fit: BoxFit.fitHeight,
                color: Colors.blueAccent,
              ),
            )
          : Container(
              width: 1,
            )
    ],
  ));
}

NestedScrollView+TabBar+TabBarView实现顶部收缩

@override
Widget build(BuildContext context) {
  double statusBarHeight = MediaQuery.of(context).padding.top;

  ///轮播图高度
  double _swiperHeight = 326 + 10.0;

  ///提示头部高度
  double _spikeHeight = 80;

  ///_appBarHeight算的是AppBar的bottom高度,kToolbarHeight是APPBar高,statusBarHeight是状态栏高度
  double _appBarHeight =
      _swiperHeight + _spikeHeight - kToolbarHeight - statusBarHeight;

  return NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverOverlapAbsorber(
          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
          child: SliverAppBar(
            backgroundColor: Color(0xfff1f1f1),
            forceElevated: innerBoxIsScrolled,
            bottom: PreferredSize(
                child: Container(),
                preferredSize: Size.fromHeight(_appBarHeight)),

            ///TabBar顶部收缩的部分
            flexibleSpace: Column(
              children: <Widget>[
                _swiper(),
                _spike(),
              ],
            ),
          ),
        ),

        ///停留在顶部的TabBar
        SliverPersistentHeader(
          delegate: _SliverAppBarDelegate(_timeSelection()),
          pinned: true,
        ),
      ];
    },
    body: TabBarView(controller: _timeTabController, children: <Widget>[
      _listItem(),
      _listItem(),
      _listItem(),
      _listItem(),
      _listItem(),
      _listItem(),
    ]),
  );
}

flutter_appbar's People

Contributors

karenkaka avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.