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

Question

我是 Flutter 的新手，但我想创建一个应用程序，其中我的主要垂直列表可以从屏幕底部拖动​​到上方，当我这样做时，我的水平列表视图（如图所示）将淡出，为此我想到了使用 SliverAppBar，但我不知道如何向其中添加 Horizo​​ntal ListView。

我想实现这样的 UI。

Answer 1

首先，如果您想要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),
      )
    ],
  ),
);