Flutter:将 SliverAppbar 与 Column 小部件相结合
Flutter: combining SliverAppbar with Column widget
我正在尝试为一个应用制作一个活动页面,用户可以在其中查看带有横幅图片和其他一些有用信息的活动。我真的很喜欢用横幅实现 SliverAppBar 的想法,这样用户可以滚动查看更多信息。为此,我似乎需要一个带有 SliverAppBar 和 FlexibleSpaceBar 的 CustomScrollView。
我在网上看到的所有教程都假定屏幕的其余部分应该是各种列表,但我更想要像 Column 小部件这样的东西。但是,Column 的高度不受限制,这会导致 CustomScrollView 出现溢出错误。我可以将它包装在一个具有指定高度的 Container 中,但是正文的内容是可变大小的,所以这并不理想。有没有办法让 SliverAppBar 和 Column 并排工作?
我想要类似这样的东西:
class ActivityPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(slivers: [
SliverAppBar(
flexibleSpace: FlexibleSpaceBar(
background: Image(someImage),
),
expandedHeight: Image,
floating: false,
pinned: true,
snap: false,
),
Column(
children: [
someChildren,
]
),
)
]),
),
);
}
应该是可以的,因为在我看来这有点常见的模式,但我看了很多,我只能找到正文由列表组成的例子...
对于遇到同样问题的人:这是我刚刚找到的解决方案:
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: this.color,
flexibleSpace: FlexibleSpaceBar(
background: YourImage(),
),
)
];
},
body: Container(
child: Builder(builder: (context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
WidgetOne(),
WidgetTwo()
]);
})),
),
)),
);
}
使用 ListView 而不是 Column。 ListView 具有动态大小
对我来说最好的方法是使用SliverToBoxAdapter
。只需将 Column
包装在 Container
中,然后将此 Container
包装在 SliverToBoxAdapter
中,它应该可以正常工作。
使用 SliverList
和 SliverChildListDelegate
而不是 Column
。
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Container(color: Colors.green),
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(color: Colors.yellow, height: 400),
Container(color: Colors.red, height: 800),
]),
),
],
),
);
}
我正在尝试为一个应用制作一个活动页面,用户可以在其中查看带有横幅图片和其他一些有用信息的活动。我真的很喜欢用横幅实现 SliverAppBar 的想法,这样用户可以滚动查看更多信息。为此,我似乎需要一个带有 SliverAppBar 和 FlexibleSpaceBar 的 CustomScrollView。
我在网上看到的所有教程都假定屏幕的其余部分应该是各种列表,但我更想要像 Column 小部件这样的东西。但是,Column 的高度不受限制,这会导致 CustomScrollView 出现溢出错误。我可以将它包装在一个具有指定高度的 Container 中,但是正文的内容是可变大小的,所以这并不理想。有没有办法让 SliverAppBar 和 Column 并排工作?
我想要类似这样的东西:
class ActivityPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(slivers: [
SliverAppBar(
flexibleSpace: FlexibleSpaceBar(
background: Image(someImage),
),
expandedHeight: Image,
floating: false,
pinned: true,
snap: false,
),
Column(
children: [
someChildren,
]
),
)
]),
),
);
}
应该是可以的,因为在我看来这有点常见的模式,但我看了很多,我只能找到正文由列表组成的例子...
对于遇到同样问题的人:这是我刚刚找到的解决方案:
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: this.color,
flexibleSpace: FlexibleSpaceBar(
background: YourImage(),
),
)
];
},
body: Container(
child: Builder(builder: (context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
WidgetOne(),
WidgetTwo()
]);
})),
),
)),
);
}
使用 ListView 而不是 Column。 ListView 具有动态大小
对我来说最好的方法是使用SliverToBoxAdapter
。只需将 Column
包装在 Container
中,然后将此 Container
包装在 SliverToBoxAdapter
中,它应该可以正常工作。
使用 SliverList
和 SliverChildListDelegate
而不是 Column
。
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Container(color: Colors.green),
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(color: Colors.yellow, height: 400),
Container(color: Colors.red, height: 800),
]),
),
],
),
);
}