美文网首页Flutter学习
flutter SliverAppBar + Tabbar +

flutter SliverAppBar + Tabbar +

作者: xmb | 来源:发表于2019-07-11 14:19 被阅读0次

参考文章:flutter SliverAppBar
使用:NestedScrollView + SliverAppBar + FlexibleSpaceBar + SliverPersistentHeader + TabBar + TabBarView
效果:

QQ20190711-152937-HD.gif
全部代码:
import 'package:flutter/material.dart';
import 'package:moka_flutter/config/config.dart';

class MyRewardPage extends StatefulWidget {
  MyRewardPage({Key key}) : super(key: key);

  @override
  _MyRewardPageState createState() => new _MyRewardPageState();
}

class _MyRewardPageState extends State<MyRewardPage>
    with TickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> _silverBuilder(BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        new SliverAppBar(
          leading: new GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: new Image.asset('assets/common/nav_back_arrow.png'),
          ),
          elevation: 0,
          automaticallyImplyLeading: false,
          title: new Text('我是标题'),
          centerTitle: true, // 标题居中
          expandedHeight: 200.0, // 展开高度
          floating: true, // 随着滑动隐藏标题
          pinned: true, // 固定在顶部
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: false,
            background: new Container(
              color: MkColor.textYellow,
              margin: new EdgeInsets.only(top: kToolbarHeight),
              child: new Column(
                children: <Widget>[
                  new Text('header 111'),
                  new Text('header 222'),
                  new Text('header 333'),
                  new Text('header 444'),
                  new Text('header 555'),
                  new Text('header 666'),
                  new Text('header 777'),
                  new Text('header 888'),
                ],
              ),
            ),
          ),
        ),
        new SliverPersistentHeader(
          delegate: _SilverAppBarDelegate(TabBar(
            labelColor: MkColor.textBlue,
            unselectedLabelColor: MkColor.textBlack,
            controller: _tabController,
            tabs: <Widget>[
              new Tab(
                text: "tab1",
              ),
              new Tab(
                text: "tab2",
              ),
              new Tab(
                text: "tab3",
              ),
            ],
          )),
        ),
      ];
    }

    return new Scaffold(
      body: SafeArea(
          child: NestedScrollView(
        headerSliverBuilder: _silverBuilder,
        body: new TabBarView(
          controller: _tabController,
          children: <Widget>[
            new ListView(
              children: <Widget>[
                new Text('tab1内容'),
              ],
            ),
            new ListView(
              children: <Widget>[
                new Text('tab2内容'),
              ],
            ),
            new ListView(
              children: <Widget>[
                new Text('tab3内容'),
              ],
            ),
          ],
        ),
      )),
    );
  }
}

class _SilverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SilverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;

  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

相关文章

网友评论

    本文标题:flutter SliverAppBar + Tabbar +

    本文链接:https://www.haomeiwen.com/subject/ehtdkctx.html