我想了解是否有办法让默认的 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(),
),
)
],
),
),
);
谢谢。