Question

基于此设计：

我正在尝试将stroke(...)与Circle().stroke(Color.black, lineWidth: 1) Circle().stroke(style: StrokeStyle(lineWidth: 1, lineCap: .butt, lineJoin: .bevel, miterLimit: 1, dash: [CGFloat](), dashPhase: 1))一起使用，但是我似乎无法使这些项目重叠，因此当应用左上和右上半径时，会显示前一个项目的颜色。与其他帖子类似：How to overlap SliverList on a SliverAppBar

但是我正在尝试将SliverList应用于所有SliverAppBar个孩子。到目前为止，我完成的最好的工作是一种解决方法，将项目包装在另一个Stack中并应用以前的背景色：

SliverList

谢谢！

Answer 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),
                  ),
                );
              },
            ),
          ),
        ],
      );

您只需要显式更改第一个位置即可。

Answer 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),
                      ),
                    ),)
          )
        ]

Flutter中的SliverList重叠子项

2 个答案: