我正在尝试制作一个页面,其中包含一个SliverAppBar
、一些带有文本的小部件和一个List
.
我使用了NestedScrollView
包含 Sliver 标头的 a Column
,以及本身包含带有文本和列表的小部件的 a 。
这是build
功能:
@override Widget build(BuildContext context) {
var _bar = widget.bar ;
_screenWidth = MediaQuery.of(context).size.width ;
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(_bar.name,
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://s1.qwant.com/thumbr/0x380/1/2/2a39f1f558f2cbbec11a08e43493bde861d612add6be643dbc5ad6fe0b16fc/BDBE5B56-B1B4-586D-27C8A70A4A54E50A.jpg?u=https%3A%2F%2Fimages.bwwstatic.com%2Fcolumnpic6%2FBDBE5B56-B1B4-586D-27C8A70A4A54E50A.jpg&q=0&b=1&p=0&a=1",
fit: BoxFit.cover,
)),
),
];
},
body: _offer(_bar),
),
);
}
功能是主要问题,这里_offer
是:
Widget _offer(Bar bar) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: _screenWidth / 4,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: Image.network("https://s1.qwant.com/thumbr/0x380/3/9/60c4de7be57ee1b7d24d07dde941c3027588bc313699cba9ef9ef8fb6c7fda/1280px-Hard_Rock_Cafe_Logo.svg.png?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F2%2F2c%2FHard_Rock_Cafe_Logo.svg%2F1280px-Hard_Rock_Cafe_Logo.svg.png&q=0&b=1&p=0&a=1").image
)
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
bar.name.toUpperCase(),
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
Text(
"Bar category" + " - " + "Bar address",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
Text(
"Opening hours" + " - " + "01.12.12.12.12",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
Text(
"Happy Hour de 20h a 23h",
style: TextStyle(
color: Colors.deepOrange,
fontWeight: FontWeight.bold,
),
)
],
),
],
),
Image.asset("assets/favorites.png"),
Padding(padding: EdgeInsets.all(20),),
Center(
child: Text(
"Menu".toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25
),
),
),
Padding(padding: EdgeInsets.all(20)),
Flexible(
fit: FlexFit.loose,
child: CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return productItem(context, _productsList[index]);
},
childCount: _productsList.length,
),
),
],
),
)
],
);
}
这是结果:
链接到 gif:https ://ibb.co/x8j6vvm
(如果有人知道如何在问题中集成 gif,请随时编辑它!)
我希望从第二个“TestName1”到心脏图像的数据与页面的其余部分一起完全滚动。我怎样才能做到这一点?