如何在 flutter 滚动视图中将容器或任何其他小部件固定在应用栏下方
How to pin a container or any other widget below appbar in scroll view in flutter
我希望在滚动屏幕时将小部件放置在应用程序下方。
屏幕包含一个带有灵活 space (sliverappbar) 的浮动应用栏,在其下方有一个包含任何容器或选项卡视图的容器。
link中的视频是我想要的效果示例。
我有一个解决您的特定问题的想法,最近实现了与您想要的非常相似或相同的东西,但我找不到您在视频中谈到的 link你想要达到的效果。您能否编辑 link 并将其上传到视频中,以便我可以查看,以便为您的问题提供精确的解决方案?
好的,我想我现在明白你的意思了。您需要实施 CustomScrollView
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
// Your appbar goes here
),
SliverPersistentHeader(
pinned: true,
delegate: PersistentHeader(
widget: Row(
// Format this to meet your need
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Hello World'),
Text('Hello World'),
Text('Hello World'),
],
),
),
),
],
),
为 Persistent header 创建一个新的 class,它扩展了一个 SliverPersistentHeaderDelegate,如图所示:
class PersistentHeader extends SliverPersistentHeaderDelegate {
final Widget widget;
PersistentHeader({this.widget});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
width: double.infinity,
height: 56.0,
child: Card(
margin: EdgeInsets.all(0),
color: Colors.white,
elevation: 5.0,
child: Center(child: widget),
),
);
}
@override
double get maxExtent => 56.0;
@override
double get minExtent => 56.0;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return true;
}
}
如果您遇到任何其他问题,请告诉我。
我希望在滚动屏幕时将小部件放置在应用程序下方。 屏幕包含一个带有灵活 space (sliverappbar) 的浮动应用栏,在其下方有一个包含任何容器或选项卡视图的容器。 link中的视频是我想要的效果示例。
我有一个解决您的特定问题的想法,最近实现了与您想要的非常相似或相同的东西,但我找不到您在视频中谈到的 link你想要达到的效果。您能否编辑 link 并将其上传到视频中,以便我可以查看,以便为您的问题提供精确的解决方案?
好的,我想我现在明白你的意思了。您需要实施 CustomScrollView
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
// Your appbar goes here
),
SliverPersistentHeader(
pinned: true,
delegate: PersistentHeader(
widget: Row(
// Format this to meet your need
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Hello World'),
Text('Hello World'),
Text('Hello World'),
],
),
),
),
],
),
为 Persistent header 创建一个新的 class,它扩展了一个 SliverPersistentHeaderDelegate,如图所示:
class PersistentHeader extends SliverPersistentHeaderDelegate {
final Widget widget;
PersistentHeader({this.widget});
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
width: double.infinity,
height: 56.0,
child: Card(
margin: EdgeInsets.all(0),
color: Colors.white,
elevation: 5.0,
child: Center(child: widget),
),
);
}
@override
double get maxExtent => 56.0;
@override
double get minExtent => 56.0;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return true;
}
}
如果您遇到任何其他问题,请告诉我。