如何解决如何使用底部重叠组件制作固定的 SliverAppBar 标题
我正在尝试使用 CustomScrollView
和 Slivers
获得低于输出。
但是我在使用 SliverAppBar
时遇到了两个问题,
1) 标题栏滚动隐藏
2) SliverAppBar bottom
属性在滚动时溢出。
这是我目前的代码。我在 CodePen 和这里添加了最少的代码,所以任何人都可以直接访问它。
import 'package:Flutter/material.dart';
final Color darkBlue = Color.fromARGB(255,18,32,47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),debugShowCheckedModeBanner: false,home: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,floating: false,elevation: 0,expandedHeight: 300.0,title: Text("Title"),flexibleSpace: FlexibleSpaceBar(
background: Container(
child: Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1VQ7GnY9bpez5Ec8Ce2acx-K3KqaDg91i6A&usqp=CAU'),),collapseMode: CollapseMode.parallax,bottom: PreferredSize(
preferredSize: const Size.fromHeight(0.0),child: Transform.translate(
offset: const Offset(0,50),child: Container(
color: Colors.blue,padding: EdgeInsets.only(
top: 20,bottom: 20,left: 50,right: 50),margin: EdgeInsets.only(left: 20,right: 20,bottom: 20),child: Text("Section"),SliverList(
delegate: SliverChildBuilderDelegate(
(context,index) => ListTile(
tileColor: (index % 2 == 0) ? Colors.white : Colors.green[50],title: Center(
child: Text('$index',style: TextStyle(
fontWeight: FontWeight.normal,fontSize: 50,color: Colors.greenAccent[400]) //TextStyle
),//Text
),//Center
),//ListTile
childCount: 51,//SliverChildBuildDelegate
)
],);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。