SwiftUI中如何获取iPhone屏幕宽度？如何实现屏幕宽正方形Image？

我来帮你搞定这个问题～先讲怎么获取屏幕宽度，再修正你的Image布局代码。

获取屏幕宽度的两种方式 #

• 直接用UIKit的UIScreen：这种方式简单直接，适合iPhone单窗口场景，代码如下：

  let screenWidth = UIScreen.main.bounds.width
  

  不过要注意，在iPad分屏或多窗口场景下，这个值是整个屏幕的宽度，而非当前应用窗口的宽度；但在iPhone上基本不会有这个问题。

• SwiftUI原生的GeometryReader：这是更推荐的方式，它能获取当前视图上下文的可用尺寸，适配安全区域、父视图约束等各种布局场景：

  GeometryReader { geometry in
      // 在这里用 geometry.size.width 获取当前可用宽度
  }
  

修正你的正方形Image代码 #

你原来的代码之所以会让图像高度和视图高度一致，是因为设置了maxHeight: .infinity，这会让Image尽可能撑满父视图的高度。要实现宽度等于屏幕宽度、高度等于宽度的正方形，我们可以这样写：

方式一：用GeometryReader（推荐） #

var body: some View {
    GeometryReader { geometry in
        Image("someImage")
            .resizable()
            .scaledToFill() // 让图像填满整个正方形区域，超出部分会被裁剪
            // 也可以用.scaledToFit()，让图像完整显示，可能会有留白
            .frame(width: geometry.size.width, height: geometry.size.width)
            .clipped() // 裁剪超出frame的部分
    }
    .edgesIgnoringSafeArea(.all) // 如果需要忽略安全区域，让正方形占满整个屏幕，加上这句
}

方式二：直接用UIScreen获取宽度 #

如果你确定只需要整个屏幕的宽度，也可以这么写：

var body: some View {
    let screenWidth = UIScreen.main.bounds.width
    Image("someImage")
        .resizable()
        .scaledToFill()
        .frame(width: screenWidth, height: screenWidth)
        .clipped()
        .edgesIgnoringSafeArea(.all)
}

核心逻辑就是明确设置frame的width和height为同一个值，而不是用无限大的高度约束，这样就能保证图像是标准正方形啦～

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