Flutter 如何创建可扩展/可收缩的水平ListView？

我对Flitter还很陌生，但我想创建一个应用程序，在这个应用程序中，我的主垂直列表可以从屏幕的底部拖到上面，当我这样做时，我的水平列表视图（如图所示）将淡出，为此我想到了使用SliverAppBar，但我不知道如何向其中添加水平列表视图

我想实现这样的UI

---

对于初学者，如果您想要一个

滑动条

方法，请尝试此方法，但我建议使用两个

列表

。一横一竖

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),
      )
    ],
  ),
);

返回脚手架(
正文：自定义滚动视图(
条子：[
滑杆(
扩展高度：300，
标题：对，
对,，
标高：4，
浮动：是的，
标题：正文(
“立即订阅”，
样式：TextStyle（颜色：Colors.white），
),
flexibleSpace:FlexibleSpaceBar(
标题添加：常量边集全部（0），
collapseMode:collapseMode.pin，
背景：ListView.builder(
滚动方向：轴水平，
物品计数：4，
itemBuilder:（构建上下文，int索引）{
返回容器(
颜色：Colors.indigoAccent，
页边距：仅限边集（左：20，下：16，上：180），
孩子：大小盒子(
身高：100，
宽度：100，
儿童：中心(
子项：文本（“项目编号$index”），
),
),
);
}),
),
),
银表(
代表：
SliverChildBuilderDelegate（（BuildContext上下文，int索引）{
返回容器(
边距：LTRB（16,8,16,12）的常数边集，
装饰：盒子装饰(
边界半径：边界半径。圆形（10），
颜色：颜色，黑色，
),
填充：常数边集。全部（22），
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
正文(
“免费7天”，
风格：主题（上下文）
.文本主题
大字标题
.copyWith（颜色：颜色。白色），
),
常量大小框(
身高：2，
),
正文(
‘五折优惠’，
风格：主题（上下文）
.文本主题
按钮
.copyWith（颜色：Colors.green重音），
),
常量大小框(
身高：6，
),
正文(
'\$60',
样式：Theme.of（context）.textTheme.headline.copyWith(
fontWeight:fontWeight.w700，
颜色：颜色，白色，
尺寸:28),，
)
],
),
);
}，儿童人数：10），
)
],
),
);