Flutter：如何允许内容与SliverAppBar重叠？
问题描述 投票：1回答：1
在android中，我们使用app:behavior_overlapTop="64dp"实现此目的
我希望重叠的内容像上面的GIF一样扑朔迷离
我的代码
class DetailsPage extends StatefulWidget {
@override
_DetailsPage createState() => _DetailsPage();
}
class _DetailsPage extends State<DetailsPage> {
@override
void initState() {
super.initState();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
_scrollController = ScrollController();
_scrollController.addListener(_scrollListener);
}
ScrollController _scrollController;
bool lastStatus = true;
_scrollListener() {
if (isShrink != lastStatus) {
setState(() {
lastStatus = isShrink;
});
}
}
bool get isShrink {
return _scrollController.hasClients &&
_scrollController.offset > (250 - kToolbarHeight);
}
@override
void dispose() {
_scrollController.removeListener(_scrollListener);
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
// backgroundColor: Colors.transparent,
body: NestedScrollView(
controller: _scrollController,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 250.0,
floating: false,
brightness: Brightness.light,
pinned: true,
// elevation: 0.0,
// backgroundColor: AppColors.colorCreateTripOrange,
backgroundColor: Colors.white,
actions: <Widget>[
GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Padding(
padding: const EdgeInsets.only(right: 20.0),
child: Image.asset(
'assets/images/close.png',
width: 25.0,
height: 25.0,
),
),
)
],
leading: Padding(
padding: const EdgeInsets.only(left: 20.0, top: 0),
child: IconButton(
iconSize: 25,
icon: Image.asset(
'assets/images/back.png',
width: 25,
height: 25,
),
color: Colors.black,
onPressed: () {
Navigator.of(context).pop();
},
)),
flexibleSpace: FlexibleSpaceBar(
centerTitle: false,
collapseMode: CollapseMode.parallax,
title: Text(isShrink ? "Rome" : "",
style: TextStyle(
color: isShrink ? Colors.black : Colors.white,
fontFamily: 'bin_bold',
fontSize: 18.0,
)),
background: Image.network(
"https://media.istockphoto.com/photos/great-colosseum-rome-italy-picture-id692334500",
fit: BoxFit.cover,
)),
),
];
},
body: Container(
// padding: const EdgeInsets.only(left: 20.0, right: 20.0, top: 40.0),
decoration: BoxDecoration(
color: AppColors.colorWhite,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Column(
children: <Widget>[
Expanded(
child: Container(
padding:
const EdgeInsets.only(left: 20.0, right: 20.0, top: 40.0),
decoration: BoxDecoration(
color: AppColors.colorWhite,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: ListView(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0),
child: Text(
"Rome",
style: TextStyle(
color: Colors.black,
fontFamily: 'bin_bold',
fontSize: 25.0),
),
),
Padding(
padding: EdgeInsets.only(top: 20, left: 15, right: 15),
child: Row(
children: <Widget>[
Image.asset(
'assets/images/calender.png',
width: 25.0,
height: 25.0,
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
"March 6-12, 2020",
style: TextStyle(
fontFamily: 'bin',
fontSize: 18,
color: AppColors.colorActivityGray),
),
)
],
),
),
Container(
width: double.infinity,
margin: const EdgeInsets.only(
top: 20.0, left: 20.0, right: 30.0),
// padding: const EdgeInsets.only(left: 20.0, right: 20.0),
decoration: BoxDecoration(
color: AppColors.colorTripsGray,
borderRadius: BorderRadius.all(Radius.circular(20)),
border: Border.all(color: AppColors.colorDivider),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 15.0,
bottom: 0.0,
left: 20.0,
right: 20.0),
child: Text(
Constants.region,
style: TextStyle(
color: AppColors.colorLightBorderOrange,
fontFamily: 'din',
fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.only(
top: 10.0,
bottom: 0.0,
left: 20.0,
right: 20.0),
child: Text(
Constants.firstName,
style: TextStyle(
color: AppColors.colorCreateGreyTrans,
fontFamily: 'din',
fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.only(
top: 10.0, bottom: 0.0, left: 0.0, right: 00.0),
child: Divider(),
),
Padding(
padding: const EdgeInsets.only(
top: 10.0,
bottom: 0.0,
left: 20.0,
right: 20.0),
child: Text(
Constants.activities,
style: TextStyle(
color: AppColors.colorLightBorderOrange,
fontFamily: 'din',
fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.only(
top: 10.0,
bottom: 0.0,
left: 20.0,
right: 20.0),
child: Text(
"Food & Bar, Must See Attractions",
style: TextStyle(
color: AppColors.colorCreateGreyTrans,
fontFamily: 'din',
fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.only(
top: 10.0, bottom: 0.0, left: 0.0, right: 00.0),
child: Divider(),
),
Padding(
padding: const EdgeInsets.only(
top: 10.0,
bottom: 0.0,
left: 20.0,
right: 20.0),
child: Text(
Constants.noOfTravellers,
style: TextStyle(
color: AppColors.colorLightBorderOrange,
fontFamily: 'din',
fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.only(
top: 10.0,
bottom: 0.0,
left: 20.0,
right: 20.0),
child: Text(
"2 Adults, 1 kid",
style: TextStyle(
color: AppColors.colorCreateGreyTrans,
fontFamily: 'din',
fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.only(
top: 10.0, bottom: 0.0, left: 0.0, right: 00.0),
child: Divider(),
),
Padding(
padding: const EdgeInsets.only(
top: 10.0,
bottom: 0.0,
left: 20.0,
right: 20.0),
child: Text(
Constants.email,
style: TextStyle(
color: AppColors.colorLightBorderOrange,
fontFamily: 'din',
fontSize: 20),
),
),
Padding(
padding: const EdgeInsets.only(
top: 10.0,
bottom: 10.0,
left: 20.0,
right: 20.0),
child: Text(
"[email protected]",
style: TextStyle(
color: AppColors.colorCreateGreyTrans,
fontFamily: 'din',
fontSize: 20),
),
),
],
),
),
],
)
],
),
),
),
Container(
width: double.infinity,
margin: const EdgeInsets.only(top: 20.0),
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: AppColors.colorWhite,
borderRadius: BorderRadius.all(Radius.circular(40)),
border: Border.all(color: AppColors.colorDivider, width: 2.0),
),
child: Center(
child: Wrap(
children: <Widget>[
MaterialButton(
padding: const EdgeInsets.symmetric(
horizontal: 40, vertical: 20),
textColor: Colors.black,
color: AppColors.colorWhite,
child: Text(
Constants.messageTripDesigner,
style: TextStyle(
fontFamily: 'din_bold',
fontSize: Constants.regionFontSize),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
side: BorderSide(
color: AppColors.colorLightBorderOrange,
width: 2),
),
onPressed: () {
Navigator.of(context).pop();
},
)
],
),
),
)
],
),
),
),
);
}
}
class MySliverAppBar extends SliverPersistentHeaderDelegate {
final double expandedHeight;
MySliverAppBar({@required this.expandedHeight});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Stack(
fit: StackFit.expand,
overflow: Overflow.visible,
children: [
Image.network(
"https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
fit: BoxFit.cover,
),
Center(
child: Opacity(
opacity: shrinkOffset / expandedHeight,
child: Text(
"MySliverAppBar",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 23,
),
),
),
),
],
);
}
@override
double get maxExtent => expandedHeight;
@override
double get minExtent => kToolbarHeight;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) => true;
}
下面是我到目前为止尝试过的一些帖子
- https://github.com/flutter/flutter/issues/404
- Allow GridView to overlap SliverAppBar
- How to overlap SliverList on a SliverAppBar
- https://flutter.dev/docs/cookbook/lists/floating-app-bar
- https://medium.com/flutter-community/flutter-increase-the-power-of-your-appbar-sliverappbar-c4f67c4e076f
如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。
1个回答
最新问题
- 出现不可恢复的错误：在 Ghostscript 中使用 zugferd.ps 时在 .putdeviceprops 中进行范围检查
- Unity 2022.3.44f1 - 任务“:launcher:checkReleaseDuplicateClasses”执行失败
- 如何以编程方式将自定义导航集成到 Visual Studio“向后导航”列表中
- 使用 Crypto++ 验证 Windows Hello 公钥
- Whitespace：当 git reset --hard HEAD 无法修复时，如何解决 git“需要更新”问题？
- Laravel 中 AJAX 请求未收到 JSON 响应的问题
- 为什么我无法 ping 通我的 docker 容器？
- 如何在systemd中启动服务时添加用户输入
- Swagger 声明 schema = @Schema(implementation = Map.class) 在 swagger-ui 中将 Schema 表示为 String
- 如何从有效控件中禁用 Bootstrap 4 验证样式
- 是否可以在没有窗口或其他 UIElement 的情况下显示 WinUi3 MenuFlyout？
- 在 Azure AD B2C 中，是否可以在 Azure 门户上编辑用户的（自定义）属性？
- 如何递归检查嵌套对象中是否存在值
- git rebase 会更新所有提交 ID 吗？
- 如何正确执行异步Windows服务ExecuteAsync？
- 实现 scipy Butterworth 过滤器来对 numpy 数组序列中包含的数据进行操作
- C 仅当返回 false 时才在循环中调用函数
- Python 3：将向量乘以矩阵，无需 NumPy
- 如何向 ExtJS 组合框添加空项目？
- median() 尝试将列更改为数字
© www.soinside.com 2019 - 2024. All rights reserved.