如何在SliverList中添加定位堆栈并使其可滚动，就像我们滚动时顶部图像部分将隐藏并只能看到appBar&scroll

Question

这里我粘贴了我想要实现的视频链接，请帮忙嗨这里我想在可滚动侧的顶部添加一个容器，并且容器的某些部分应该位于应用程序栏的末尾，并且它应该可滚动

class HomePage extends StatelessWidget {
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            leading:IconButton(onPressed: (){},
              icon:const Icon(Icons.arrow_back) ,
              color: Colors.white,
            ),
            actions: [
              Align(
                alignment: Alignment.centerLeft,
                child: IconButton(onPressed: (){},
                  icon:const Icon(Icons.notifications_none_outlined) ,
                  color: Colors.white,
                ),
              ),
              Align(
                alignment: Alignment.centerLeft,
                child: IconButton(onPressed: (){},
                  icon:const Icon(Icons.more_vert_outlined) ,
                  color: Colors.white,
                ),
              ),
            ],
            backgroundColor: ThemeManager.sliverAppBarColor,
            expandedHeight: 350.0,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: Padding(
                padding:  const EdgeInsets.symmetric(horizontal: 20.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const SizedBox(height: 60,),
                    ClipOval(
                      child: Container(
                        child: Image.asset(
                          '',
                          fit: BoxFit.cover,
                          width: 120,
                          height: 120,
                        ),
                      ),
                    ),
                    const Text('',
                    style: TextStyle(color: ThemeManager.profileNameTextColor,
                      fontSize: 24,
                      fontWeight: FontWeight.w600,
                    ),),
                    const Center(
                      child: Text('',
                        style: TextStyle(color:
                        ThemeManager.profileNameTextColor,
                          fontSize: 16,
                          fontWeight: FontWeight.w400,
                        ),

                      ),
                    ),
                    const SizedBox(height: 3,),
                    // const EmployeeIdContainer(),
                    const SizedBox(height: 8,),
                    const SizedBox(height: 10,),
                    const SizedBox(height: 10,),
                  ],
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Stack(
                      children: [
                        Positioned(
                          top:-10,
                          left: 0,
                          right: 0,
                          bottom: 0,
                          child: Container(
                            width: 400,
                            height: 500,
                          ),
                        ),
                      ],
                    );
              },
              childCount: 50, // Number of list items
            ),
          ),
        ],
      ),
    );
  }
}

这里我想要实现的是，当我们滚动应用栏时，可伸缩容器顶端必须位于FlexibleSpaceBar中，这意味着容器应堆叠在顶部-10位置。

Answer 1

您可以使用

SliverPersistentHeaderDelegate

和少量数学来进行可视化。

final double bottom = lerpDouble(-100, 10, shrinkOffset / expandedHeight)!;

这是片段

class AppSliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  AppSliverPersistentHeaderDelegate({
    required this.expandedHeight,
  });

  final double expandedHeight;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    final double bottom = lerpDouble(-100, 10, shrinkOffset / expandedHeight)!; // play with your values here
    return ColoredBox(
      // you may use ImageFilter instead
      color: Colors.red.withOpacity(.1),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Positioned(
            left: 0,
            right: 0,
            bottom: bottom,
            child: Placeholder(
              //replace with image and increase height>maxExtent
              fallbackHeight: maxExtent * 1.5,
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              height: kToolbarHeight,
              color: Colors.deepPurple.withAlpha(100),
              alignment: Alignment.center,
              child: Text('Title'),
            ),
          ),
        ],
      ),
    );
  }

  @override
  double get maxExtent => expandedHeight;

  @override
  double get minExtent => kToolbarHeight;

  @override
  bool shouldRebuild(covariant AppSliverPersistentHeaderDelegate oldDelegate) => oldDelegate.expandedHeight != expandedHeight;
}

并使用

slivers: [
  SliverPersistentHeader(
    pinned: true,
    delegate: AppSliverPersistentHeaderDelegate(expandedHeight: 200),
  ),

初步外观

滚动