SwiftUI：如何强制ContextMenu Preview占满屏幕宽度？

背景 #

我正在使用新版SwiftUI ContextMenu，它支持Preview功能，但无法强制Preview占满屏幕宽度。

代码 #

Text("Hello World")
    .contextMenu { menuItems } preview: { Text("Preview") }

问题 #

注意： 我已尝试为Text("Preview")添加.frame(maxWidth: .infinity)，但问题仍未解决。

• 如何强制Preview占满屏幕宽度？

解决方案 #

新版ContextMenu的Preview容器默认带有内边距，仅给Text添加.frame(maxWidth: .infinity)无法突破容器限制，可通过以下两种方式实现：

1. 使用containerRelativeFrame（iOS 16+）
   这是适配SwiftUI新布局系统的最优方式，直接让预览视图相对容器占满水平宽度：

Text("Hello World")
    .contextMenu { menuItems } preview: {
        Text("Preview")
            .containerRelativeFrame(.horizontal)
            .background(Color.white) // 可选：添加背景确认宽度效果
    }

2. 结合frame与背景扩展
   若需兼容更早版本，可给预览视图设置全屏frame后添加透明背景，让布局系统识别到需要扩展至容器边界：

Text("Hello World")
    .contextMenu { menuItems } preview: {
        Text("Preview")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color.clear)
    }

原理是SwiftUI视图默认仅占据内容所需空间，添加背景后，布局系统会将背景尺寸纳入视图范围，从而触发frame的全屏设置生效。

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