在 Flutter 中重叠 SliverList 子项

Posted

技术标签:

【中文标题】在 Flutter 中重叠 SliverList 子项【英文标题】:Overlap SliverList children in Flutter 【发布时间】:2020-07-10 18:47:06 【问题描述】:

基于此设计:

我正在尝试将SliverListSliverAppBar 一起使用,但我似乎无法重叠这些项目,因此当应用左上角和右上角半径时,前一个项目的颜色会出现。 与其他帖子类似: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中的特定项目位置?

Flutter-如何将标题添加到 SliverList 的 SliverChildBuilderDelegate?

如何在 SliverList 中显示滚动条?

如何为 Flutter SliverList 中的元素设置动画?