如何在 SliverAppBar 底部添加一个 Button 并使其在 ExtentList 上重叠? [英] How can I add a Button on bottom of SliverAppBar and make it overlap on ExtentList?
本文介绍了如何在 SliverAppBar 底部添加一个 Button 并使其在 ExtentList 上重叠?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试在 SliverAppBar 底部属性中放置一个 Column(a Container inside) 作为按钮,但它不能与 ExtentList 重叠,只是溢出底部边距.我想让它像 Spotify 应用一样重叠.
I've try to put a Column(a Container inside) in SliverAppBar bottom property as a button, but it can't overlap the ExtentList ,just overflow the bottom margin. I want to make it overlapped just like Spotify App do.
这是 Spotify 示例:https://imgur.com/VrZRY4c
this is Spotify Sample: https://imgur.com/VrZRY4c
这是我尝试过的:https://imgur.com/4bNZw8j
我的代码:
class _MenuListState extends State<MenuList> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.only(top: 10, bottom: 10),
sliver: SliverAppBar(
pinned: true,
expandedHeight: 300,
title: Text(
'Testing',
style: TextStyle(color: Colors.red),
),
flexibleSpace: FlexibleSpaceBar(
title: Text(''),
background: Image.asset(
'images/w.jpg',
fit: BoxFit.cover,
),
),
bottom: PreferredSize(
child: Column(children: <Widget>[
Text(
'test',
style: TextStyle(),
),
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(109, 76, 65, 1),
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
height: 54,
width: 100,
),
]),
),
),
),
SliverFixedExtentList(//extentlist)
],
),
);
}
}
推荐答案
试试这个
class _MenuListState extends State<MenuList> {
static const double _appBarBottomBtnPosition =
24.0; //change this value to position your button vertically
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text(
'Testing',
style: TextStyle(color: Colors.red),
),
),
SliverAppBar(
pinned: true,
expandedHeight: 300.0,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
titlePadding: EdgeInsets.only(bottom: 25),
title: Text('Title'),
background: Image.asset(
'images/w.jpg',
fit: BoxFit.cover,
),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(0.0),
child: Transform.translate(
offset: const Offset(0, _appBarBottomBtnPosition),
child: RaisedButton(
shape: StadiumBorder(),
child: Text("Click Here"),
onPressed: () {},
),
),
),
),
SliverPadding(
padding: EdgeInsets.only(top: _appBarBottomBtnPosition),
),
SliverFixedExtentList(
//extentlist
),
],
),
);
}
}
这篇关于如何在 SliverAppBar 底部添加一个 Button 并使其在 ExtentList 上重叠?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文