用到的组件:
NestedScrollView() //嵌套组件
SliverPersistentHeader()//Sliver 顶部持久组件
SliverAppBar() //类似AppBar组件
TabBar() TabBarView()
代码:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/home_controller.dart';
class HomeView extends GetView<HomeController> {
///tab栏组件
List<Widget> tabzj = [
Text('这是啊'),
Text('这是啊'),
Text('这是啊'),
Text('这是啊'),
Text('这是啊'),
Text('这是啊'),
];
@override
Widget build(BuildContext context) {
var tabkzq =
TabController(length: tabzj.length, vsync: AnimatedListState());
return Scaffold(
// appBar: AppBar(
// title: Text('HomeView'),
// centerTitle: true,
// ),
///嵌套滚动组件
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
///sliver家族组件
return [
_sliverappbar(),
SliverPersistentHeader(
pinned: true, //true固定 false不固定
delegate: _delegate(
maxhigh: 100.0,
minhigh: 90.0,
chid: Container(
color: Colors.white,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (ctx, index) {
return Container(
width: 80,
margin: EdgeInsets.all(5),
alignment: Alignment.center,
color: Colors.blue,
child: Text(
'$index',
style: TextStyle(color: Colors.white),
),
);
}),
),
)),
SliverPersistentHeader(
pinned: true,
delegate: _delegate(
maxhigh: 40.0,
minhigh: 40.0,
chid: Container(
width: double.infinity,
height: double.infinity,
color: Colors.white,
child: TabBar(
onTap: (value) {
print(value);
},
isScrollable: true,
controller: tabkzq,
labelColor: Colors.black,
tabs: tabzj),
),
)),
];
},
///普通widget
body: TabBarView(
controller: tabkzq,
children: [
ListView.builder(itemBuilder: (ctx, index) {
return ListTile(
title: Text(' $index 标题'),
);
}),
ListView.builder(itemBuilder: (ctx, index) {
return ListTile(
title: Text(' $index 标题'),
);
}),
ListView.builder(itemBuilder: (ctx, index) {
return ListTile(
title: Text(' $index 标题'),
);
}),
ListView.builder(itemBuilder: (ctx, index) {
return ListTile(
title: Text(' $index 标题'),
);
}),
ListView.builder(itemBuilder: (ctx, index) {
return ListTile(
title: Text(' $index 标题'),
);
}),
ListView.builder(itemBuilder: (ctx, index) {
return ListTile(
title: Text(' $index 标题'),
);
}),
],
),
),
);
}
}
//头部
class _sliverappbar extends StatelessWidget {
const _sliverappbar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverAppBar(
forceElevated: true,
snap: false,
floating: false,
pinned: true,
expandedHeight: 150,
flexibleSpace: FlexibleSpaceBar(
title: Text('这是标题'),
background: Image.network(
'http://p5.qhimg.com/bdm/480_296_0/t016608f207bd942436.jpg',
fit: BoxFit.fill,
),
collapseMode: CollapseMode.pin,
),
);
}
}
//中间列表
class _Sliverlist extends StatelessWidget {
const _Sliverlist({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverPersistentHeader(
pinned: true,
// floating: true,
delegate: _delegate(
maxhigh: 120.0,
minhigh: 100.0,
chid: Container(
width: double.infinity,
color: Colors.red,
)));
}
}
//操作
class _delegate extends SliverPersistentHeaderDelegate {
double maxhigh;
double minhigh;
Widget chid;
_delegate({required this.maxhigh, required this.minhigh, required this.chid});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
// TODO: implement build
return chid;
}
@override
// TODO: implement maxExtent
double get maxExtent => maxhigh; //展开状态下的高度
@override
// TODO: implement minExtent
double get minExtent => minhigh; //收缩状态下的高度
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
// TODO: implement shouldRebuild
return maxhigh != oldDelegate.maxExtent || minhigh != oldDelegate.minExtent;
}
}
THE END