Flutter滚动页面中用户头像的动态位置适配需求

需求说明 #

• 初始状态：将图片assets/images/user.png显示在应用左上角白色圆圈的中心位置
• 滚动交互：向下滚动页面时，标题与描述文本隐藏，"Go Premium"按钮固定在顶部，同时头像下移至按钮左侧空隙处
• 适配要求：支持多机型适配，小屏设备可采用硬编码方式调整位置

修改后的实现代码 #

CustomScrollView(
  slivers: [
    SliverAppBar(
      backgroundColor: const Color.fromARGB(12, 14, 13, 3).withOpacity(1),
      centerTitle: false,
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(0),
        child: SizedBox(
          width: size.width * .7,
          child: ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              shape: const StadiumBorder(),
              backgroundColor: const Color.fromARGB(255, 255, 0, 0),
            ),
            child: const Text(
              'Go Premium!',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
      pinned: true,
      expandedHeight: 165,
      titleSpacing: 15,
      // 滚动后显示在按钮左侧的头像
      title: LayoutBuilder(
        builder: (context, constraints) {
          // 计算AppBar收缩进度：0为完全展开，1为完全收缩
          final scrollRate = (1 - constraints.maxHeight / 165).clamp(0.0, 1.0);
          return Opacity(
            opacity: scrollRate,
            child: const CircleButton(), // 你的头像组件
          );
        },
      ),
      flexibleSpace: FlexibleSpaceBar(
        collapseMode: CollapseMode.pin,
        background: Stack(
          children: [
            // 初始状态的头像
            LayoutBuilder(
              builder: (context, constraints) {
                final scrollRate = (1 - constraints.maxHeight / 165).clamp(0.0, 1.0);
                return Opacity(
                  opacity: 1 - scrollRate,
                  child: Positioned(
                    top: -size.width * .08,
                    left: -size.width * .08,
                    child: Transform.translate(
                      offset: const Offset(-30, -30),
                      child: const CircleButton(),
                    ),
                  ),
                );
              },
            ),
            // 标题与描述文本
            LayoutBuilder(
              builder: (context, constraints) {
                final scrollRate = (1 - constraints.maxHeight / 165).clamp(0.0, 1.0);
                return Opacity(
                  opacity: 1 - scrollRate,
                  child: Positioned(
                    left: size.width * .2,
                    top: size.height * .09,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text(
                          'JustLift',
                          style: TextStyle(
                            color: Color.fromARGB(255, 252, 250, 250),
                            fontWeight: FontWeight.bold,
                            fontSize: 50,
                          ),
                        ),
                        Text(
                          element,
                          style: TextStyle(
                            color: Color.fromARGB(255, 158, 154, 154),
                            fontWeight: FontWeight.bold,
                            fontSize: 20,
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    ),
    // 页面其他内容的Sliver组件
  ],
)

实现逻辑 #

1. 双头像平滑切换：在SliverAppBar的title区域新增滚动后显示的头像，初始头像保留在flexibleSpace中，通过滚动进度控制两者的透明度，实现无感知过渡
2. 滚动进度计算：利用LayoutBuilder获取SliverAppBar当前高度，计算收缩比例，以此控制元素的显示/隐藏状态
3. 文本自动隐藏：标题与描述文本跟随滚动进度逐步降低透明度，完全收缩时彻底隐藏
4. 小屏适配方案：针对小屏设备，可直接修改Positioned的top/left参数或Transform的offset值进行硬编码调整

效果示意图 #

滚动前 #

滚动后 #

内容的提问来源于stack exchange，提问作者Promaster