Flutter实现WhatsApp式头像滚动缩放入AppBar动画方案问询

核心实现思路 #

通过CustomScrollView配合SliverAppBar的动态布局能力，监听滚动偏移量来控制头像的位置缩放变化，实现向上滚动时头像逐步移入AppBar并缩小的效果。

完整代码实现 #

import 'package:flutter/material.dart';

void main() => runApp(const ProfilePage());

class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: const Color(0xff008069),
        appBarTheme: const AppBarTheme(backgroundColor: Color(0xff008069)),
      ),
      home: const _ProfileScreen(),
    );
  }
}

class _ProfileScreen extends StatefulWidget {
  const _ProfileScreen();

  @override
  State<_ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<_ProfileScreen> {
  // 头像初始尺寸与AppBar内最终尺寸
  final double _initialAvatarSize = 120;
  final double _appBarAvatarSize = 40;
  // 滚动过渡临界偏移量
  final double _scrollThreshold = 200;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            expandedHeight: _scrollThreshold + _initialAvatarSize / 2,
            title: const Text("联系人信息"),
            flexibleSpace: LayoutBuilder(
              builder: (context, constraints) {
                // 计算当前滚动偏移量
                final scrollOffset = constraints.biggest.height -
                    MediaQuery.of(context).padding.top -
                    kToolbarHeight;
                // 计算头像缩放比例
                final scale = 1 -
                    (scrollOffset / _scrollThreshold).clamp(0.0, 1.0) *
                        (1 - _appBarAvatarSize / _initialAvatarSize);
                // 计算头像垂直偏移量
                final topOffset = scrollOffset / 2;

                return Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(color: Theme.of(context).primaryColor),
                    Positioned(
                      top: topOffset,
                      child: Transform.scale(
                        scale: scale,
                        child: CircleAvatar(
                          radius: _initialAvatarSize / 2,
                          backgroundImage: const NetworkImage(
                              "https://picsum.photos/200"),
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
          // 页面内容列表
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                title: Text("列表项 ${index + 1}"),
                subtitle: const Text("测试内容"),
              ),
              childCount: 30,
            ),
          ),
        ],
      ),
    );
  }
}

关键细节说明 #

• SliverAppBar设置pinned: true确保滚动时AppBar始终固定在顶部
• 通过LayoutBuilder实时获取滚动布局约束，计算偏移量来动态调整头像的位置和缩放比例
• _scrollThreshold控制过渡的完成时机，滚动距离超过该值后，头像完全缩小至AppBar内的尺寸
• 主题色采用WhatsApp的标志性绿色，保证视觉风格统一

自定义调整方向 #

• 修改_initialAvatarSize和_appBarAvatarSize可调整头像的初始大小与最终大小
• 替换NetworkImage为本地图片或用户实际头像资源
• 修改title参数即可设置页面标题文本

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