如何解决Flutter SliverAppBar 内容一致?
我正在尝试创建一个 AppBar
,它会在折叠时显示一些内容,并在展开时显示更多内容。
我现在拥有的:
期望的结果是当 SliverAppBar 折叠时红色和蓝色容器保持可见,展开时绿色容器显示。
我试过了:
class _TestPageState extends State<TestPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
TestAppBar(),SliverList(
delegate:
SliverChildBuilderDelegate((BuildContext context,int index) {
return Center(child: Text('text'));
},childCount: 100),)
],),);
}
}
class TestAppBar extends StatelessWidget {
const TestAppBar({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverAppBar(
elevation: 0,titleSpacing: 0,centerTitle: false,pinned: true,title: Text('Test app bar'),shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),bottomright: Radius.circular(20))),collapsedHeight: 254,expandedHeight: 436 + MediaQuery.of(context).viewPadding.top,backgroundColor: Colors.grey,flexibleSpace: FlexibleSpaceBar(
background: Padding(
padding:
EdgeInsets.only(top: MediaQuery.of(context).viewPadding.top + 44),child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),child: Container(color: Colors.red,height: 100),Padding(
padding: const EdgeInsets.all(8.0),child: Container(color: Colors.blue,child: Container(color: Colors.green,)
],);
}
}
我也尝试过使用 SliverPersistentHeaderDelagate
来完成这项工作,但也没有运气:
class TestPageHeader extends SliverPersistentHeaderDelegate {
final double minHeight = 200;
final double maxHeight = 500;
@override
Widget build(
BuildContext context,double shrinkOffset,bool overlapsContent) {
return SizedBox.expand(child: LayoutBuilder(
builder: (_,constraints) {
return Container(
decoration: const Boxdecoration(
color: Colors.red,borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),)
);
},));
}
@override
double get maxExtent => maxHeight;
@override
double get minextent => minHeight;
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
return maxExtent != oldDelegate.maxExtent ||
minextent != oldDelegate.minextent;
}
}
是否可以使用 SliverAppBar
或 SliverPersistentHeaderDelegate
来实现这一目标?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。