SwiftUI Mac端视图宽度塌陷问题排查与修复求助

问题描述 #

开发首个SwiftUI Mac应用时，遇到与AppKit时期同类的布局问题：部分视图宽度无法填充容器，反而出现收缩现象。具体表现为上下分栏的视图均未占满容器宽度，仅Header部分内容收缩到最小宽度时，Body部分也会跟随收缩；仅显示Body时，偶尔能正常填充宽度。

相关代码 #

视图代码 #

import SwiftUI

/// Present an e-mail.
struct InternetMessageView<Message: InternetMessageProtocol>: View {
  /// The message to display.
  private let message: Message
  /// Whether to track the message header.
  private let useHeader: Bool
  /// Whether to track the message body, if any.
  private let useBody: Bool

  /// Whether there is any message data to show.
  var hasMessageData: Bool {
    useHeader || useBody && message.body != nil
  }

  /// Create a view for the given message.
  init(
    of message: Message,
    ignoreHeader: Bool = false,
    ignoreBody: Bool = false
  ) {
    self.message = message
    self.useHeader = !ignoreHeader
    self.useBody = !ignoreBody
  }

  /// Create a view for the given header-only message.
  init(headerOf message: Message) {
    self.init(of: message, ignoreBody: true)
  }
  /// Create a view for the given degenerate body-only message.
  init(bodyOf message: Message) {
    self.init(of: message, ignoreHeader: true)
  }
  /// Create a view of an ignored message.
  fileprivate init(notOf message: Message) {
    self.init(of: message, ignoreHeader: true, ignoreBody: true)
  }

  var body: some View {
    VSplitView {
      if useHeader {
        ScrollView {
          Grid {
            GridRow {
              Text("Name").font(.headline)
              Text("Body").font(.headline)
            }
            ForEach(message.header, id: \.self) { field in
              GridRow {
                Text(field.name).font(.body)
                Text(field.body).font(.body)
              }
            }
          }.accessibilityIdentifier("headerGrid")
        }
        .accessibilityIdentifier("headerScroll")
        .overlay {
          if message.header.isEmpty {
            ContentUnavailableView("Empty Header", systemImage: "tray")
              .accessibilityIdentifier("emptyHeaderOverlay")
          }
        }.frame(width: .infinity, height: .infinity)
      } else {
        EmptyView()
      }
      if useBody,
        let bodyPages = message.body.map({
          $0.split(separator: "\u{0C}", omittingEmptySubsequences: false)
        })
      {
        VStack {
          if let firstPage = bodyPages.first.map(String.init(_:)) {
            TextEditor(text: .constant(firstPage))
              .accessibilityIdentifier("bodyPage_0")
              .overlay {
                if firstPage.isEmpty {
                  if bodyPages.count > 1 {
                    ContentUnavailableView(
                      "Empty Page",
                      systemImage: "document.on.document"
                    )
                    .accessibilityIdentifier("emptyBodyPage_0")
                  } else {
                    ContentUnavailableView("Empty Body", systemImage: "document")
                      .accessibilityIdentifier("emptyBodyOverlay")
                  }
                }
              }
            ForEach(bodyPages.dropFirst().map(String.init(_:)), id: \.self) {
              s in
              Divider()
              TextEditor(text: .constant(s))
                .accessibilityIdentifier("bodyPage_dynamic")
                .overlay {
                  if s.isEmpty {
                    ContentUnavailableView(
                      "Empty Page",
                      systemImage: "document.on.document"
                    )
                    .accessibilityIdentifier("emptyBodyPage_dynamic")
                  }
                }
            }
          } else {
            ContentUnavailableView("Empty Body", systemImage: "document")
          }
        }
        .accessibilityIdentifier("bodyContainer").frame(width: .infinity, height: .infinity)
      } else {
        EmptyView()
      }
    }.overlay {
      if !hasMessageData {
        ContentUnavailableView("No Data", systemImage: "questionmark.text.page")
          .accessibilityIdentifier("noDataOverlay")
      }
    }.frame(width: 512, height: 384)
  }
}

// MARK: Previews

private struct Field: InternetMessageHeaderField {
  let name: String
  let body: String
}

extension [Field]: InternetMessageHeader {}

private struct EMail: InternetMessageProtocol {
  let header: [Field]
  let body: String?
}

private let field = Field(name: "Hello", body: "there")
private let normal = EMail(
  header: [field],
  body: "This is a test."
)

#Preview("full") {
  InternetMessageView(of: normal)
}

#Preview("only header") {
  InternetMessageView(headerOf: normal)
}

#Preview("only body") {
  InternetMessageView(bodyOf: normal)
}

#Preview("nothing") {
  InternetMessageView(notOf: normal)
}

#Preview("empty header") {
  InternetMessageView(of: EMail(header: [], body: "This is a test."))
}

#Preview("empty body") {
  InternetMessageView(of: EMail(header: [field], body: ""))
}

#Preview("empty message") {
  InternetMessageView(of: EMail(header: [], body: ""))
}

#Preview("multiple pages") {
  InternetMessageView(
    of: EMail(
      header: [field],
      body: "alpha beta\ngamma delta\u{0C}epsilon zeta\u{0C}\u{0C}eta theta\n"
    )
  )
}

消息格式协议代码 #

/// A key-value header field of an Internet Message header.
protocol InternetMessageHeaderField: Hashable {
  /// The key of a header field.
  var name: String { get }
  /// The value of a header field.
  var body: String { get }
}

/// An Internet Message header.
protocol InternetMessageHeader: RandomAccessCollection
where Element: InternetMessageHeaderField {
}

/// An Internet Message.
protocol InternetMessageProtocol {
  /// The type storing header fields.
  associatedtype Header: InternetMessageHeader

  /// The message's header.
  var header: Header { get }
  /// The message's body, which may be ommitted.
  var body: String? { get }
}

问题现象 #

原因分析 #

1. VSplitView布局特性：macOS上的VSplitView默认不会强制子视图填充容器宽度，子视图会根据自身内容尺寸布局，导致收缩。
2. Grid默认行为：SwiftUI的Grid默认按内容最小宽度布局，未设置列的弹性约束，导致Header部分收缩到内容宽度。
3. EmptyView占位问题：当不显示Header或Body时，使用EmptyView作为占位，EmptyView不占据任何空间，导致VSplitView的布局计算异常，影响另一部分的宽度。
4. Frame约束传递失效：虽然设置了.frame(width: .infinity)，但父容器的宽度约束未正确传递到子视图，尤其是Grid和TextEditor这类有自身布局逻辑的视图。

修复方案 #

关键修改点 #

1. 给VSplitView子视图添加弹性宽度约束：将.frame(width: .infinity)替换为.frame(maxWidth: .infinity)，确保子视图优先填充可用宽度；同时添加layoutPriority(1)提升布局优先级，避免被挤压。
2. 设置Grid列的弹性布局：显式定义Grid的列为.flexible()，让列自动填充可用宽度。
3. 替换EmptyView为占位视图：用Color.clear.frame(maxWidth: .infinity, maxHeight: .infinity)替代EmptyView，保证VSplitView的布局结构完整。
4. 确保TextEditor填充宽度：给TextEditor添加.frame(maxWidth: .infinity)，同时让父VStack也设置.frame(maxWidth: .infinity)。

修改后的核心代码片段 #

1. Header部分修改

if useHeader {
  ScrollView {
    Grid(columns: [GridColumn(.flexible()), GridColumn(.flexible())]) { // 显式设置弹性列
      GridRow {
        Text("Name").font(.headline)
        Text("Body").font(.headline)
      }
      ForEach(message.header, id: \.self) { field in
        GridRow {
          Text(field.name).font(.body)
          Text(field.body).font(.body)
        }
      }
    }
    .accessibilityIdentifier("headerGrid")
  }
  .accessibilityIdentifier("headerScroll")
  .overlay {
    if message.header.isEmpty {
      ContentUnavailableView("Empty Header", systemImage: "tray")
        .accessibilityIdentifier("emptyHeaderOverlay")
    }
  }
  .frame(maxWidth: .infinity, maxHeight: .infinity) // 用maxWidth替代width
  .layoutPriority(1) // 提升布局优先级
} else {
  Color.clear.frame(maxWidth: .infinity, maxHeight: .infinity) // 替换EmptyView
}

2. Body部分修改

if useBody,
  let bodyPages = message.body.map({
    $0.split(separator: "\u{0C}", omittingEmptySubsequences: false)
  })
{
  VStack(spacing: 0) { // 明确spacing避免默认间距
    if let firstPage = bodyPages.first.map(String.init(_:)) {
      TextEditor(text: .constant(firstPage))
        .accessibilityIdentifier("bodyPage_0")
        .frame(maxWidth: .infinity) // 让TextEditor填充宽度
        .overlay {
          if firstPage.isEmpty {
            if bodyPages.count > 1 {
              ContentUnavailableView(
                "Empty Page",
                systemImage: "document.on.document"
              )
              .accessibilityIdentifier("emptyBodyPage_0")
            } else {
              ContentUnavailableView("Empty Body", systemImage: "document")
                .accessibilityIdentifier("emptyBodyOverlay")
            }
          }
        }
      ForEach(bodyPages.dropFirst().map(String.init(_:)), id: \.self) { s in
        Divider()
        TextEditor(text: .constant(s))
          .accessibilityIdentifier("bodyPage_dynamic")
          .frame(maxWidth: .infinity) // 让TextEditor填充宽度
          .overlay {
            if s.isEmpty {
              ContentUnavailableView(
                "Empty Page",
                systemImage: "document.on.document"
              )
              .accessibilityIdentifier("emptyBodyPage_dynamic")
            }
          }
      }
    } else {
      ContentUnavailableView("Empty Body", systemImage: "document")
        .frame(maxWidth: .infinity)
    }
  }
  .accessibilityIdentifier("bodyContainer")
  .frame(maxWidth: .infinity, maxHeight: .infinity) // 用maxWidth替代width
  .layoutPriority(1) // 提升布局优先级
} else {
  Color.clear.frame(maxWidth: .infinity, maxHeight: .infinity) // 替换EmptyView
}

完整修改说明 #

• 显式定义Grid的两列为弹性布局，让Header的列自动填充可用宽度，不再收缩到内容尺寸。
• 将所有.frame(width: .infinity)改为.frame(maxWidth: .infinity)，这样视图会优先占据最大可用宽度，同时保留自身内容的最小宽度约束。
• 给VSplitView的子视图添加layoutPriority(1)，确保它们在布局时优先获取可用空间，避免被其他视图挤压。
• 用Color.clear替换EmptyView，保证VSplitView始终有两个子视图（即使其中一个不可见），维持布局结构的完整性，避免布局计算异常。
• 给TextEditor添加frame(maxWidth: .infinity)，确保文本编辑器填充父容器宽度，不再跟随Header收缩。

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