崩塌时从中到左的颤振条标题
崩塌时从中到左的颤振条标题
提问于 2022-04-22 13:25:30
我的目标是遵循我设计的东西(受三星天气的启发)，但是当你刚开始学习的时候，实现代码是很困难的。展开时，标题应居中，折叠时应留在左上角。
到目前为止，这是我的代码和我目前的进展。最棘手的部分是把标题移到中间位置。
Scaffold(
backgroundColor: Colors.transparent,
body: CustomScrollView(
slivers: [
SliverAppBar(
actions: <Widget>[
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
],
pinned: _pinned,
snap: _snap,
floating: _floating,
expandedHeight: 160,
backgroundColor: Colors.transparent,
elevation: 0.0,
flexibleSpace: FlexibleSpaceBar(
titlePadding: EdgeInsets.all(18),
// centerTitle: true,
title: Text('Panahon'),
),
),
SliverToBoxAdapter(
child: SizedBox(
height: 800,
child: Card(),
))
],
),
),
编辑:应用程序根据时间动态地改变主题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-22 15:05:36
您可以使用SliverPersistentHeaderDelegate创建自定义条应用程序条，您将获得可用于动画应用程序条元素的shrinkOffset。
在dartPad上运行
将您的SliverAppBar替换为
SliverPersistentHeader(
pinned: true,
delegate: MySliverHeaderDelegate(onActionTap: () {
debugPrint("on Tap");
}),
),和定制的SliverHeaderDelegate
class MySliverHeaderDelegate extends SliverPersistentHeaderDelegate {
final double _maxExtent = 160;
final VoidCallback onActionTap;
MySliverHeaderDelegate({
required this.onActionTap,
});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
debugPrint(shrinkOffset.toString());
return Container(
color: Colors.cyanAccent,
child: Stack(
children: [
Align(
alignment: Alignment(
//little padding
-(shrinkOffset > _maxExtent - 20
? _maxExtent - 20
: shrinkOffset) /
_maxExtent,
0),
child: const Text('Panahon'),
),
// here provide actions
Positioned(
top: 0,
right: 0,
child: IconButton(
icon: const Icon(Icons.search),
onPressed: onActionTap,
),
),
],
),
);
}
@override
double get maxExtent => _maxExtent;
@override
double get minExtent => kToolbarHeight;
@override
bool shouldRebuild(covariant MySliverHeaderDelegate oldDelegate) {
return oldDelegate != this;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71969519
复制相关文章
相似问题
腾讯云开发者
