Flutter动态设置FlexibleHeaderDelegate的expandedHeight适配头图

现有实现存在三处硬编码问题，直接导致竖图（高度大于宽度）显示异常：

• FlexibleHeaderDelegate的expandedHeight固定写死为500，和图片实际比例不匹配
• 头图外层嵌套AspectRatio强制16:9比例，和非16:9的图片比例冲突
• 图片fit属性设置为BoxFit.fill，会强制拉伸图片填满可用空间，极易出现变形、裁切异常

两种固定参数的实际效果：

• expandedHeight: 250 时显示异常：
  
• expandedHeight: 500 时显示正常：
  

核心逻辑：头图展开时默认撑满屏幕宽度，因此合理的展开高度 = 屏幕宽度 / 图片真实宽高比，同时给高度设置合理上下限，避免特殊比例图片影响阅读体验。

1. 引入依赖，新增图片尺寸获取方法 #

首先在文件头部引入dart:async，用于处理异步获取图片尺寸的逻辑：

import 'dart:async';

在_MessageScreenState类中新增方法，提前获取网络图片的真实宽高：

Future<Size> _getNetworkImageSize(String imageUrl) async {
  final ImageProvider provider = NetworkImage(imageUrl);
  final ImageStream stream = provider.resolve(const ImageConfiguration());
  final Completer<Size> completer = Completer();
  
  late final ImageStreamListener listener;
  listener = ImageStreamListener((ImageInfo info, bool syncCall) {
    completer.complete(Size(
      info.image.width.toDouble(),
      info.image.height.toDouble(),
    ));
    stream.removeListener(listener);
  }, onError: (Object error, StackTrace? stack) {
    completer.completeError(error);
    stream.removeListener(listener);
  });
  
  stream.addListener(listener);
  return completer.future;
}

2. 修正头图构建代码 #

移除硬编码的AspectRatio嵌套，修改图片适配模式为BoxFit.cover（该模式会等比缩放图片填满空间，不会出现拉伸变形）：

Widget buildImage(BuildContext context, Message message) => FadeInImage.memoryNetwork(
      fit: BoxFit.cover,
      width: double.infinity,
      image: message.picture,
      placeholder: kTransparentImage,
      imageErrorBuilder: (context, error, stackTrace) => Container(
        color: Theme.of(context).primaryColor,
      ),
    );

3. 动态计算expandedHeight替换硬编码值 #

在MessageLoaded分支的构建逻辑中，通过FutureBuilder异步计算适配后的展开高度，同时设置高度上下限：最小高度200（避免头部过窄），最大高度不超过屏幕高度的60%（避免超长竖图占满首屏，看不到正文内容）。
修改后的CustomScrollView部分代码如下：

// 获取屏幕基础参数
final double screenWidth = MediaQuery.of(context).size.width;
final double maxExpandedHeight = MediaQuery.of(context).size.height * 0.6;
const double minExpandedHeight = 200;

return FutureBuilder<Size>(
  future: _getNetworkImageSize(state.message.picture),
  builder: (context, snapshot) {
    // 默认兜底高度
    double expandedHeight = 300;
    if (snapshot.hasData) {
      final Size imageSize = snapshot.data!;
      final double ratio = imageSize.width / imageSize.height;
      // 按图片比例计算理论高度
      final double calculateHeight = screenWidth / ratio;
      // 限制高度在上下限区间内
      expandedHeight = calculateHeight.clamp(minExpandedHeight, maxExpandedHeight);
    }

    return CustomScrollView(
      slivers: [
        SliverPersistentHeader(
          pinned: true,
          floating: false,
          delegate: FlexibleHeaderDelegate(
            statusBarHeight: MediaQuery.of(context).padding.top,
            // 替换为动态计算的高度
            expandedHeight: expandedHeight,
            background: MutableBackground(
              collapsedColor: Theme.of(context).primaryColor,
              expandedWidget: buildImage(context, state.message),
            ),
            children: [
              FlexibleTextItem(
                textAlign: TextAlign.center,
                text: state.message.title,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                collapsedStyle: Theme.of(context)
                    .textTheme
                    .headline2!
                    .copyWith(color: Colors.white),
                expandedStyle: Theme.of(context)
                    .textTheme
                    .headline2!
                    .copyWith(color: Colors.white),
                expandedAlignment: Alignment.bottomCenter,
                collapsedAlignment: Alignment.center,
                collapsedPadding: const EdgeInsets.only(left: 40),
                expandedPadding: const EdgeInsets.symmetric(
                    horizontal: 16, vertical: 5),
              ),
            ],
          ),
        ),
        SliverToBoxAdapter(
          child: Container(
            decoration: BoxDecoration(
              color: Theme.of(context).backgroundColor,
              borderRadius: BorderRadius.circular(40),
            ),
            child: Padding(
              padding: const EdgeInsets.only(
                  top: 0, left: 20, right: 20, bottom: 50),
              child: Html(
                data: state.message.message,
                style: {
                  "body": Style(
                      fontSize: const FontSize(18.0),
                      lineHeight: LineHeight.em(1.5)),
                },
              ),
            ),
          ),
        )
      ],
    );
  },
);

优化说明 #

• 图片尺寸会在页面构建时提前预取，计算过程对用户无感知
• 高度上下限可根据业务需求调整，比如需要展示长图可适当调大maxExpandedHeight
• 新增图片加载失败兜底布局，避免坏图导致页面报错
• 移除强制16:9比例限制，所有比例的图片都能正常展示，不会出现拉伸、裁切异常问题

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