0

我想了解是否有办法让默认的 sliver 应用栏看起来更像我在网上找到的这个设计。

在此处输入图像描述

PS:我熟悉这样做的默认方式,但在这种情况下使用颤振的广泛可定制的小部件似乎是个问题。

这就是我所做的。似乎没有办法使底部边缘变圆或实现非默认的 sliver 应用栏行为。

return SafeArea(
  child: Scaffold(
    body: CustomScrollView(
      slivers: [
        SliverAppBar(
          automaticallyImplyLeading: false,
          expandedHeight: height * 0.35,
          pinned: false,
          floating: true,
          leading: IconButton(
            onPressed: () => Navigator.pop(context),
            icon: Icon(
              Icons.chevron_left,
              color: Theme.of(context).primaryColor,
            ),
          ),
          flexibleSpace: FlexibleSpaceBar(
            background: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20.0), bottomRight: Radius.circular(20.0))
              ),
              child: Stack(
                children: [
                  Image.network(
                    'https://picsum.photos/200',
                    fit: BoxFit.cover,
                  ),
                  Container(
                    width: width,
                    height: height * 0.35,
                    color: Colors.redAccent,
                  ),
                ],
              ),
            )
          ),
        ),
        SliverFillRemaining(
          child: Column(
            children: List<int>.generate(6, (index) => index)
                .map((index) => Container(
                      height: 40,
                      margin: EdgeInsets.symmetric(vertical: 10),
                      color: Colors.grey[300],
                      alignment: Alignment.center,
                      child: Text('$index item'),
                    ))
                .toList(),
          ),
        )
      ],
    ),
  ),
);

谢谢。

4

0 回答 0