SwiftUI中使用position修饰符时让Shape占满屏幕宽度减内边距

问题描述 #

给定一个CGRect用于定位顶部的紫色描边矩形，需要在其下方绘制一个红色背景的圆角矩形，要求该红色矩形始终占据屏幕宽度减去20pt水平内边距的宽度，高度随内部文本自适应。但当前代码中，红色矩形被定位到最左侧，水平内边距失效，效果不符合预期。

原代码 #

struct TestView: View {
    
    let testFrame = CGRect(x: 20, y: 200, width: 240, height: 48)
    
    var body: some View {
            VStack(spacing: 20) {
                RoundedRectangle(cornerRadius: 16)
                    .stroke(.purple, lineWidth: 4)
                    .frame(width: testFrame.width, height: testFrame.height)
                // 该视图应始终占据屏幕宽度减去20pt水平内边距的宽度，高度根据内部Text/View尺寸动态调整
                VStack(alignment: .leading) {
                    Text("Some title")
                    Text("Some subtitle")
                }
                .frame(maxWidth: .infinity)
                .padding()
                .background(RoundedRectangle(cornerRadius: 16).foregroundColor(.red))
                .padding(.horizontal, 20)
            }
            .position(x: testFrame.midX, y: testFrame.midY)
    }
}

问题原因 #

position修饰符作用于整个VStack，导致整个容器的宽度被内部最宽元素（紫色矩形，240pt）限制，红色矩形的maxWidth: .infinity无法扩展到屏幕宽度，最终出现内边距失效、位置偏移的问题。

解决方案 #

将顶部紫色矩形的定位与下方红色矩形的全屏布局分离，利用GeometryReader获取屏幕尺寸，通过offset调整整体位置，保证红色矩形能占据屏幕宽度。

修改后代码 #

struct TestView: View {
    let testFrame = CGRect(x: 20, y: 200, width: 240, height: 48)
    
    var body: some View {
        GeometryReader { geo in
            VStack(spacing: 20) {
                // 顶部紫色描边矩形
                RoundedRectangle(cornerRadius: 16)
                    .stroke(.purple, lineWidth: 4)
                    .frame(width: testFrame.width, height: testFrame.height)
                
                // 下方红色圆角矩形，自适应屏幕宽度
                VStack(alignment: .leading) {
                    Text("Some title")
                    Text("Some subtitle")
                }
                .frame(maxWidth: .infinity)
                .padding()
                .background(RoundedRectangle(cornerRadius: 16).foregroundColor(.red))
                .padding(.horizontal, 10) // 单侧10pt，总水平内边距20pt
            }
            // 调整VStack位置，对齐到testFrame的起始点
            .offset(x: testFrame.minX, y: testFrame.minY)
            // 让VStack占据整个屏幕宽度，保证红色矩形能全屏扩展
            .frame(width: geo.size.width, alignment: .leading)
        }
    }
}

代码说明 #

1. 使用GeometryReader获取屏幕宽度，让外层VStack占据全屏宽度，确保红色矩形的maxWidth: .infinity生效。
2. 通过offset将整个VStack的顶部对齐到testFrame.minY，X方向对齐到testFrame.minX，保证紫色矩形的定位符合要求。
3. 红色矩形的水平内边距通过padding(.horizontal, 10)实现，结合内部的padding()，最终总水平内边距为20pt，满足需求。

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