我对颤动很陌生,但我想创建一个应用程序,我的主要垂直列表可以从屏幕底部拖动到上方,当我这样做时,我的水平列表视图(如图所示)会消失,为此,我想到了使用 SliverAppBar,但我不知道如何将 Horizontal ListView 添加到它。
我想实现这样的 UI。
我对颤动很陌生,但我想创建一个应用程序,我的主要垂直列表可以从屏幕底部拖动到上方,当我这样做时,我的水平列表视图(如图所示)会消失,为此,我想到了使用 SliverAppBar,但我不知道如何将 Horizontal ListView 添加到它。
我想实现这样的 UI。
对于初学者,如果您想要一种SliverAppBar
方法,请尝试此方法,但我建议使用两个List
。一横一竖
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 300,
centerTitle: true,
pinned: true,
elevation: 4,
floating: true,
title: Text(
'Subscribe Now',
style: TextStyle(color: Colors.white),
),
flexibleSpace: FlexibleSpaceBar(
titlePadding: const EdgeInsets.all(0),
collapseMode: CollapseMode.pin,
background: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.indigoAccent,
margin: EdgeInsets.only(left: 20, bottom: 16, top: 180),
child: SizedBox(
height: 100,
width: 100,
child: Center(
child: Text('Item No. $index'),
),
),
);
}),
),
),
SliverList(
delegate:
SliverChildBuilderDelegate((BuildContext context, int index) {
return Container(
margin: const EdgeInsets.fromLTRB(16, 8, 16, 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.black,
),
padding: const EdgeInsets.all(22),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Get 7 days free',
style: Theme.of(context)
.textTheme
.headline
.copyWith(color: Colors.white),
),
const SizedBox(
height: 2,
),
Text(
'Save 50% off',
style: Theme.of(context)
.textTheme
.button
.copyWith(color: Colors.greenAccent),
),
const SizedBox(
height: 6,
),
Text(
'\$60',
style: Theme.of(context).textTheme.headline.copyWith(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 28),
)
],
),
);
}, childCount: 10),
)
],
),
);