Flutter资产图片不显示：Dhiwise转Figma原型头部布局异常

我用Dhiwise将Figma原型转换为Flutter项目后，头部组件未正常显示，跑到了屏幕可视区域之外，调整位置后仍无法回到正确区域。

当前效果 #

头部蓝色栏偏移至屏幕上方不可见区域，页面主体内容上移

预期效果 #

头部蓝色栏位于屏幕顶部，完整显示在可视区域内

相关页面代码片段 #

return SafeArea(
 child: Scaffold(
 backgroundColor: ColorConstant.whiteA700,
 body: Container(
 height: size.height,
 width: size.width,
 child: Stack(
 children: [
 Align(
 alignment: Alignment.center,
 child: SingleChildScrollView(
 child: Container(
 height: size.height,
 width: size.width,
 child: Stack(
 alignment: Alignment.topRight,
 children: [
 Align(
 alignment: Alignment.center,
 child: Container(
 height: size.height,
 width: size.width,
 decoration: BoxDecoration(
 color: ColorConstant.whiteA700,
 ),
 child: Stack(
 alignment: Alignment.bottomCenter,
 children: [
 Align(
 alignment: Alignment.topCenter,
 child: Container(
 width: size.width,
 padding: getPadding(
 left: 11,
 top: 7,
 right: 11,
 bottom: 7,
 ),
 decoration: BoxDecoration(
 color: ColorConstant.blue200,
 ),
 child: Column(
 mainAxisSize: MainAxisSize.min,
 crossAxisAlignment:
 CrossAxisAlignment.start,
 mainAxisAlignment:
 MainAxisAlignment.start,
 children: [
 CustomIconButton(
 height: 53,
 width: 53,
 margin: getMargin(
 bottom: 276,
 ),
 child: CustomImageView(
 svgPath: ImageConstant.imgUser,

CustomImageView组件代码（Dhiwise生成） #

// ignore_for_file: must_be_immutable

import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class CustomImageView extends StatelessWidget {
  ///[url] is required parameter for fetching network image
  String? url;

  ///[imagePath] is required parameter for showing png,jpg,etc image
  String? imagePath;

  ///[svgPath] is required parameter for showing svg image
  String? svgPath;

  ///[file] is required parameter for fetching image file
  File? file;

  double? height;
  double? width;
  Color? color;
  BoxFit? fit;
  final String placeHolder;
  Alignment? alignment;
  VoidCallback? onTap;
  EdgeInsetsGeometry? margin;
  BorderRadius? radius;
  BoxBorder? border;

  ///a [CustomImageView] it can be used for showing any type of images
  /// it will shows the placeholder image if image is not found on network image
  CustomImageView({
    this.url,
    this.imagePath,
    this.svgPath,
    this.file,
    this.height,
    this.width,
    this.color,
    this.fit,
    this.alignment,
    this.onTap,
    this.radius,
    this.margin,
    this.border,
    this.placeHolder = 'assets/images/image_not_found.png',
  });

  @override
  Widget build(BuildContext context) {
    return alignment != null
        ? Align(
      alignment: alignment!,
      child: _buildWidget(),
    )
        : _buildWidget();
  }

  Widget _buildWidget() {
    return Padding(
      padding: margin ?? EdgeInsets.zero,
      child: InkWell(
        onTap: onTap,
        child: _buildCircleImage(),
      ),
    );
  }

  ///build the image with border radius
  _buildCircleImage() {
    if(radius!=null) {
      return ClipRRect(
        borderRadius: radius,
        child: _buildImageWithBorder(),
      );
    }
    else{
      return _buildImageWithBorder();
    }
  }

  ///build the image with border and border radius style
  _buildImageWithBorder(){
    if(border!=null) {
      return Container(
        decoration: BoxDecoration(
          border: border,
          borderRadius: radius,
        ),
        child: _buildImageView(),
      );
    }else{
      return _buildImageView();
    }
  }

  Widget _buildImageView() {
    if (svgPath != null && svgPath!.isNotEmpty) {
      return Container(
        height: height,
        width: width,
        child: SvgPicture.asset(
          svgPath!,
          height: height,
          width: width,
          fit: fit ?? BoxFit.contain,
          color: color,
        ),
      );
    } else if (file != null && file!.path.isNotEmpty) {
      return Image.file(
        file!,
        height: height,
        width: width,
        fit: fit ?? BoxFit.cover,
        color: color,
      );
    } else if (url != null && url!.isNotEmpty) {
      return CachedNetworkImage(
        height: height,
        width: width,
        fit: fit,
        imageUrl: url!,
        color: color,
        placeholder: (context, url) => Container(
          height: 30,
          width: 30,
          child: LinearProgressIndicator(
            color: Colors.grey.shade200,
            backgroundColor: Colors.grey.shade100,
          ),
        ),
        errorWidget: (context, url, error) => Image.asset(
          placeHolder,
          height: height,
          width: width,
          fit: fit ?? BoxFit.cover,
        ),
      );
    } else if (imagePath != null && imagePath!.isNotEmpty) {
      return Image.asset(
        imagePath!,
        height: height,
        width: width,
        fit: fit ?? BoxFit.cover,
        color: color,
      );
    }
    return SizedBox();
  }
}

问题分析与修复方案 #

问题根源

1. 过度嵌套的布局层级：多层Stack+Container且重复设置height: size.height，导致布局约束混乱
2. 错误的margin设置：CustomIconButton上的bottom:276会强制把头部容器向下挤压，直接导致头部被推出屏幕
3. 滚动视图布局错误：SingleChildScrollView被嵌套在居中对齐的Align和满屏容器内，破坏了正常的滚动布局逻辑

修复步骤

1. 简化布局层级，移除不必要的嵌套Stack和Container
2. 删除CustomIconButton上的bottom:276参数
3. 改用Column拆分头部和主体内容，用Expanded确保滚动视图占满剩余空间

修改后的核心代码示例

return SafeArea(
  child: Scaffold(
    backgroundColor: ColorConstant.whiteA700,
    body: Column(
      children: [
        // 头部蓝色栏
        Container(
          width: size.width,
          padding: getPadding(left: 11, top: 7, right: 11, bottom: 7),
          decoration: BoxDecoration(color: ColorConstant.blue200),
          child: CustomIconButton(
            height: 53,
            width: 53,
            child: CustomImageView(svgPath: ImageConstant.imgUser),
          ),
        ),
        // 主体可滚动内容
        Expanded(
          child: SingleChildScrollView(
            child: Container(
              // 此处放置原页面的主体内容
            ),
          ),
        ),
      ],
    ),
  ),
);

补充说明

• 若需要保留原有的底部固定元素，可以在Column的最后添加对应组件
• CustomImageView组件本身逻辑正常，无需修改

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