参考文章:flutter SliverAppBar
使用:NestedScrollView
+ SliverAppBar
+ FlexibleSpaceBar
+ SliverPersistentHeader
+ TabBar
+ TabBarView
效果:
全部代码:
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;
}
}
网友评论