我在我的项目中使用SliverAppBar
和SliverListView
。
我需要BorderRadius
到SliverList
底部即将出现的SliverAppBar
中。
这是我需要的屏幕截图:
这是我的代码:
Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
backgroundColor: Colors.transparent,
brightness: Brightness.dark,
actions: <Widget>[
IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
IconButton(icon: Icon(Icons.share), onPressed: () {})
],
floating: false,
pinned: false,
//title: Text("Flexible space title"),
expandedHeight: getHeight(context) - MediaQuery.of(context).padding.top,
flexibleSpace: Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage("assets/images/Rectangle-image.png")
)
),
),
bottom: _bottomWidget(context),
),
SliverList(
delegate: SliverChildListDelegate(listview),
),
],
),
)
因此,有了这段代码,UI就会像这样...可以建议我可以采用的任何其他方法来实现这种设计...
最佳答案
我使用SliverToBoxAdapter
这样的代码实现了此设计。
final sliver = CustomScrollView(
slivers: <Widget>[
SliverAppBar(),
SliverToBoxAdapter(
child: Container(
color: Color(0xff5c63f1),
height: 20,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
height: 20,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(20.0),
topRight: const Radius.circular(20.0),
),
),
),
],
),
),
),
SliverList(),
],
);
我在SliverToBoxAdapter中使用了2个容器。
SliverToBoxAdapter在Sliver Appbar和Sliver List之间。
Preview on dartpad
关于flutter - 如何将BorderRadius授予SliverList,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58570208/