2

この設計に基づいて:

ここに画像の説明を入力

使用しようとしてSliverListいますSliverAppBarが、アイテムを重ねることができないように見えるため、左上と右上の半径が適用されると、前のアイテムの色が表示されます。これは、この他の投稿に似ています: SliverAppBar で SliverList をオーバーラップする方法

しかし、私は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),
            ),
          );
        },
      ),
    ),
  ],
);

ありがとうございました!

4

2 に答える 2