如何制作嵌套滚动视图以使用父级滚动行为

Question

我试图将页面内容放在条子列表中，但是当我滚动时，页面列表和条子列表滚动行为是相互独立的。我希望两个列表能够一起滚动。我在下面添加了我的问题的 gif。

问题gif

我尝试过使用 customScrollView 和 NestedScrollViews 并将物理更改为 NeverScroll，但是当我这样做时，页面的内容总是在底部被切断。

我将包含我的代码，任何帮助将不胜感激。

主棉条

return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar.medium(
            pinned: true,
            clipBehavior: Clip.none,
            backgroundColor: Theme.of(context).primaryColor,
            surfaceTintColor: Colors.transparent,
            title: FittedBox(
              fit: BoxFit.fitWidth,
              child: Text(
                widget.festival.name,
                style: Theme.of(context).textTheme.headlineSmall!.copyWith(color: Colors.white),
                softWrap: true,
                maxLines: 2,
              ),
            ),
            iconTheme: const IconThemeData(color: Colors.white),
            actions: [
              IconButton(
                icon: const Icon(Icons.more_vert),
                onPressed: () {},
              ),
            ],
          ),
          SliverToBoxAdapter(
            child: Stack(
              children: [
                if (widget.festival.banner != null)
                  Image(
                    image: NetworkImage('${config!.imageBaseUrl}${widget.festival.banner!}'),
                    errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
                      // You can return an error image or a placeholder here
                      return const Center(child: Text('Image not found'));
                    },
                  ),
              ],
            ),
          ),
          SliverPinnedHeader(
            key: const ValueKey('navigation'),
            child: Container(
              width: double.infinity,
              height: 50,
              color: Theme.of(context).primaryColor,
              child: TabBar(
                tabs: _tabs,
                controller: _tabController,
                unselectedLabelColor: Colors.white,
                labelColor: Theme.of(context).colorScheme.primary,
              ),
            ),
          ),
          SliverFillRemaining(
            child: TabBarView(
              controller: _tabController,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: FestivalInfo(festival: widget.festival),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(widget.festival.longDescription!, style: Theme.of(context).textTheme.bodyLarge),
                ),
              ],
            ),
          ),
        ],
      ),
    );

选项卡的屏幕内容

return ListView(
      children: [
        Text(festival.startDateFormatted, style: Theme.of(context).textTheme.bodyLarge),
        const SizedBox(height: 20),
        BannerCarousel(
          banners: BannerImages.listBanners,
          customizedIndicators: const IndicatorModel.animation(width: 20, height: 5, spaceBetween: 2, widthAnimation: 50),
          height: 200,
          activeColor: Colors.amberAccent,
          disableColor: Colors.white,
          animation: true,
          borderRadius: 10,
          width: screenWidth,
          indicatorBottom: true,
        ),
        const SizedBox(height: 20),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text('About',
              style: Theme.of(context).textTheme.titleLarge!.copyWith(fontWeight: FontWeight.w500, color: Colors.white)),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(festival.description!, style: Theme.of(context).textTheme.bodyLarge),
        ),
        if (festival.longDescription != null)
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(festival.longDescription!, style: Theme.of(context).textTheme.bodyLarge),
          ),
      ],
    );

Answer 1

在选项卡的屏幕内容中：

ListView

将覆盖

CustomScrollView

的滚动，因此为了避免这种情况，您可以在

ListView

中添加此属性：

 primary: false,
 physics: const NeverScrollableScrollPhysics(), // disable scroll for listview