在 Flutter 中重叠 SliverList 子项
Posted
技术标签:
【中文标题】在 Flutter 中重叠 SliverList 子项【英文标题】:Overlap SliverList children in Flutter 【发布时间】:2020-07-10 18:47:06 【问题描述】:基于此设计:
我正在尝试将SliverList
与SliverAppBar
一起使用,但我似乎无法重叠这些项目,因此当应用左上角和右上角半径时,前一个项目的颜色会出现。
与其他帖子类似:How to overlap SliverList on a SliverAppBar
但我正在尝试将Stack
应用于所有SliverList
孩子。到目前为止,我取得的最好成绩是一种解决方法,我将项目包装在另一个 Container
中并应用以前的背景颜色:
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Test'),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index)
return Container(
child: Container(
child: Column(
children: <Widget>[
Container(
child: Text(
'Index is $index'.toUpperCase(),
),
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(bottom: 10.0),
),
Container(height: 200.0)
],
),
constraints: BoxConstraints.tightForFinite(width: 200),
decoration: BoxDecoration(
color:
index % 2 == 0 ? Color(0XFF45766E) : Color(0XFFECB141),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40.0),
topRight: Radius.circular(40.0),
),
),
padding: EdgeInsets.only(
left: 20.0,
top: 10.0,
),
),
decoration: BoxDecoration(
color: index % 2 == 0 ? Color(0XFFECB141) : Color(0XFF45766E),
),
);
,
),
),
],
);
谢谢!
【问题讨论】:
你能添加一段你想做的视频吗? 【参考方案1】:CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('Test'),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index)
return Container(
child: Container(
child: Column(
children: <Widget>[
Container(
child: Text(
'Index is $index'.toUpperCase(),
),
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(bottom: 10.0),
),
Container(height: 200.0)
],
),
constraints: BoxConstraints.tightForFinite(width: 200),
decoration: BoxDecoration(
color: index % 2 == 0
? Color(0XFF45766E)
: Color(0XFFECB141),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40.0),
topRight: Radius.circular(40.0),
),
),
padding: EdgeInsets.only(
left: 20.0,
top: 10.0,
),
),
decoration: BoxDecoration(
//the only change required here
color: index % 2 == 0
? index == 0 ? Colors.white : Color(0XFFECB141)
: Color(0XFF45766E),
),
);
,
),
),
],
);
您只需要明确更改第一个位置。
【讨论】:
这只是一种解决方法,我试图完成的事情可能会通过比较得到更好的解释:同样的方式,您可以使用子构建器创建无限的项目列表而无需明确说明多少(除非您使用childCount
),我想无限地创建一个自定义小部件列表,这些小部件彼此略微重叠,而不指定父Container
的高度并且不使用解决方法。我实际上想要完成的是将列表的子代堆叠在委托中。如果使用定位,那么它需要一个明确的高度。【参考方案2】:
CustomScrollView->
SliverList->
SliverChildBuilderDelegate->
Container->
Stack->children[
Container,
positioned(bottom:0,
child: Container(decoration: BoxDecoration(
color: (next index color),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40.0),
topRight: Radius.circular(40.0),
),
),)
)
]
【讨论】:
这行得通吗?因为它类似于我所做的事情,但使用了特定的定位,例如bottom: 0
破坏了代码,因为它需要知道它可以增长到的高度,因为它往往会无限增长。以上是关于在 Flutter 中重叠 SliverList 子项的主要内容,如果未能解决你的问题,请参考以下文章
flutter系列之:使用SliverList和SliverGird
在 Flutter 中通过拖放重新排序 SliverList 中的项目
Flutter如何滚动到SliverList中的特定项目位置?