SwiftUI如何创建高度为屏幕一半的图片并居中显示？

嘿，这个需求我经常碰到，给你两种靠谱的实现方式，优先推荐第一种，适配性更强～

方法一：用GeometryReader（推荐，适配所有布局场景） #

这个方法能精准获取当前视图的可用空间高度，不管页面有没有导航栏、TabBar，都能正确计算出图片该有的高度，还能轻松实现居中。

代码示例：

struct HalfHeightCenteredImageView: View {
    var body: some View {
        // GeometryReader会提供当前容器的尺寸信息
        GeometryReader { geometry in
            Image("your-image-asset-name")
                .resizable() // 必须添加，否则图片无法缩放
                .aspectRatio(contentMode: .fit) // 保持图片比例，适配设定高度；若要填充整个区域，换成.fill
                .frame(height: geometry.size.height / 2) // 设置高度为可用空间的一半
                // 让这个frame占满整个GeometryReader空间，确保图片在屏幕中央
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .clipped() // 如果用了.fill模式，加上这个裁剪超出部分
        }
        .edgesIgnoringSafeArea(.all) // 可选，忽略状态栏、Home条的安全区域，让图片能延伸到屏幕边缘
    }
}

为什么推荐这个方法？ #

• GeometryReader拿到的是当前视图的可用高度，不是整个屏幕的固定高度，比如页面有导航栏时，它会自动减去导航栏的高度，避免图片被遮挡。
• 外层的frame(maxWidth: .infinity, maxHeight: .infinity)会让图片的父容器占满整个屏幕，再配合默认的center对齐，图片自然就居中了。

方法二：用VStack+Spacer（简单场景可用） #

如果你的页面没有导航栏、TabBar，也可以用这种更直观的方式，通过上下两个Spacer把图片挤到中间：

struct SimpleHalfHeightCenteredImage: View {
    var body: some View {
        VStack {
            Spacer() // 顶部占位，把图片往下推
            Image("your-image-asset-name")
                .resizable()
                .aspectRatio(contentMode: .fit)
                // 直接用屏幕高度的一半，注意：如果有导航栏，这个高度会包含导航栏，可能导致图片位置不对
                .frame(height: UIScreen.main.bounds.height / 2)
            Spacer() // 底部占位，把图片往上推
        }
        .edgesIgnoringSafeArea(.all)
    }
}

注意点 #

• 这个方法用UIScreen.main.bounds.height拿到的是整个物理屏幕的高度，当页面有导航栏、TabBar时，图片的实际显示高度会被挤压，位置也可能偏移，所以只适合纯全屏的简单页面。

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