如何将小部件添加到狭长的应用程序栏区域？
如何将小部件添加到狭长的应用程序栏区域？
提问于 2019-06-04 18:10:51
我想在Sliver AppBar区域添加小工具，让它感觉更自然。AppBar提供了添加图片的自由，但它是否具有添加更多小部件的功能呢？
我的重点是如何在小应用程序栏上使用这些CircleAvatar和Text小部件。
回答 2
Stack Overflow用户
发布于 2019-06-05 03:34:01
使用SliverAppBar :/将无法做到这一点。
您应该做的是在SliverPersistentHeaderDelegate中使用SliverPersistentHeader。
您必须编写更多的代码，但不要写太多:)。
示例：
slivers = [
SliverPersistentHeader(
pinned: True,
delegate: _SliverAppBarDelegate(
minHeight: 60.0,
maxHeight: 250.
),
),
SliverList(
delegate: SliverChildListDelegate([
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Column(
children: ...
),
)
]),
),
];
...
class _SliverAppBarDelegate extends x {
_SliverAppBarDelegate({
@required this.minHeight,
@required this.maxHeight,
@required this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
@override
double get minExtent => minHeight;
@override
double get maxExtent => math.max(maxHeight, minHeight);
@override
Widget build(
BuildContext context,
double shrinkOffset,
bool overlapsContent)
{
return new SizedBox.expand(
child: LayoutBuilder(
builder: (_, constraints) {
DO WHAT YOU WANT HERE !
}
)
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}Stack Overflow用户
发布于 2020-06-28 05:41:04
这里有一个结合使用SliverPersistentHeader和SliverPersistentHeaderDelegate的示例。在此示例中，当您向上滚动时，标题将调整大小，按钮将消失
slivers: <Widget>[
makeHeader(),
// You can put more slivers here
],这是makeHeader方法：
SliverPersistentHeader makeHeader() {
return SliverPersistentHeader(
pinned: pinned,
floating: true,
delegate: _SliverAppBarDelegate(
minHeight: 60.0,
maxHeight: 200.0,
),
);
}和类_SliverAppBarDelegate：
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
final double minHeight;
final double maxHeight;
_SliverAppBarDelegate(
{@required this.minHeight,
@required this.maxHeight,
this.hideButtonWhenExpanded = true});
@override
double get minExtent => minHeight;
@override
double get maxExtent => math.max(maxHeight, minHeight);
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
final appBarSize = maxHeight - shrinkOffset;
final proportion = 2 - (maxHeight / appBarSize);
final photoToButton = 160 * proportion;
final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;
return new SizedBox.expand(
child: Container(
color: Colors.white,
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Positioned(
top: 10.0,
child: CircleAvatar(
minRadius: 20.0,
maxRadius: 75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
backgroundImage: NetworkImage(
'https://randomuser.me/api/portraits/men/75.jpg'),
),
),
Positioned(
left: 0.0,
right: 0.0,
top: photoToButton,
child: Opacity(
opacity: percent,
child: FlatButton(
onPressed: () {},
child: Text(
'Add Contact',
style: TextStyle(
color: Colors.blue, fontSize: 14.0 * proportion),
),
),
),
),
Positioned(
left: 0.0,
right: 0.0,
top: appBarSize - 1.0 > 59.0 ? appBarSize - 1 : 59.0,
child: const Divider(
// color: Colors.grey,
height: 1,
thickness: 0.5,
),
)
],
),
),
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight !=
oldDelegate
.minHeight;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56441789
复制相关文章
相似问题