[英]Flutter: combining SliverAppbar with Column widget
I'm trying to make an event page for an app where user can view events that have a banner image and some other useful information.我正在尝试为应用程序创建一个事件页面,用户可以在其中查看具有横幅图像和其他一些有用信息的事件。 I really like the idea of implementing a SliverAppBar with the banner, so that the user can scroll to see more information.
我真的很喜欢用横幅实现 SliverAppBar 的想法,这样用户就可以滚动查看更多信息。 For this I seem to need a CustomScrollView with a SliverAppBar and FlexibleSpaceBar.
为此,我似乎需要一个带有 SliverAppBar 和 FlexibleSpaceBar 的 CustomScrollView。
All tutorials I have seen online assume that the rest of the screen should be a list of sorts, but I rather want something like a Column widget.我在网上看到的所有教程都假设屏幕的其余部分应该是一个排序列表,但我更想要像 Column 小部件这样的东西。 A Column has unbounded height, however, which causes overflow errors in the CustomScrollView.
但是,Column 具有无限的高度,这会导致 CustomScrollView 中出现溢出错误。 I could wrap it in a Container with specified height, but the contents of the body are of variable size, so that is not ideal.
我可以将它包装在具有指定高度的 Container 中,但是 body 的内容大小可变,所以这并不理想。 Is there a way to have a SliverAppBar and a Column work side by side?
有没有办法让 SliverAppBar 和 Column 并排工作?
I want something along the lines of this:我想要一些类似的东西:
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,
]
),
)
]),
),
);
}
It should be possible, because it seems to me a somewhat common pattern, but I have looked around a lot and I can only find examples where the body consists of lists...这应该是可能的,因为在我看来这是一个有点常见的模式,但我环顾四周,我只能找到主体由列表组成的例子......
For anyone having the same struggle: here's the solution I just found:对于任何有同样挣扎的人:这是我刚刚找到的解决方案:
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()
]);
})),
),
)),
);
}
Use ListView instead of Column.使用 ListView 而不是 Column。 ListView has dynamic size
ListView 具有动态大小
Use SliverList
and SliverChildListDelegate
instead of a Column
.使用
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),
]),
),
],
),
);
}
For me the best way is to use SliverToBoxAdapter
.对我来说最好的方法是使用
SliverToBoxAdapter
。 Just wrap your Column
in a Container
and then wrap this Container
in a SliverToBoxAdapter
and it should work fine.只需将您的
Column
包装在Container
,然后将此Container
在SliverToBoxAdapter
,它应该可以正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.