SwiftUI中frame修饰器数值单位及视图比例定位咨询

Great questions! Let's break this down step by step to clear up your confusion.

First, the short answer: the numbers you pass to frame(width:height:) are logical points (often just called "points").

What does this mean for device independence? #

SwiftUI (and UIKit before it) uses logical points as its core layout unit, not physical pixels. Every iOS/tvOS/watchOS device has a screen scale factor (e.g., 2x for Retina iPhones like the iPhone 8, 3x for high-density screens like the iPhone 14 Pro). The system automatically converts your point values to the correct number of physical pixels for the device.

For example:

• width: 100 becomes 200 physical pixels on a 2x screen
• width: 100 becomes 300 physical pixels on a 3x screen

This means you don't have to manually adjust for different screen densities—using points ensures your layout looks consistent across all devices automatically.

Your confusion here makes total sense: by default, SwiftUI's layout system works with available space relative to content, not always the parent container's full size. To position a view at a proportional spot (like 40% from the top, centered), you need to explicitly capture the parent container's dimensions using GeometryReader.

Here's how to implement it: #

GeometryReader is a view that gives you access to the size and position of its parent container. You can use this information to calculate the exact position of your child view.

struct ProportionalPositionDemo: View {
    var body: some View {
        // GeometryReader fills all available space from its parent
        GeometryReader { parentContainer in
            Text("Centered at 40% from top")
                .font(.title)
                .foregroundColor(.blue)
                // Position uses the parent's top-left corner as (0,0)
                .position(
                    x: parentContainer.size.width / 2, // Horizontal center
                    y: parentContainer.size.height * 0.4 // 40% down from the top
                )
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity) // Force the reader to fill the screen
        .background(Color.gray.opacity(0.1)) // Visualize the container bounds
    }
}

Why your initial attempt might have failed: #

If you tried setting positions without GeometryReader, you were probably working with the child view's own frame size, not the parent container's. For example, a Text view's default frame only wraps its content—so any proportional values you set would be relative to that small wrapper, not the full screen or parent container.

Alternative: Custom Alignment Guides #

For more reusable proportional layouts, you can create custom alignment guides:

// Define a custom alignment ID for 40% from the top
struct Top40PercentAlignment: AlignmentID {
    static func defaultValue(in context: ViewDimensions) -> CGFloat {
        context.height * 0.4
    }
}

// Add it to HorizontalAlignment for easy access
extension HorizontalAlignment {
    static let top40Percent = HorizontalAlignment(Top40PercentAlignment.self)
}

// Usage example
struct CustomAlignmentDemo: View {
    var body: some View {
        VStack(alignment: .top40Percent) {
            Text("Aligned at 40% from top")
                .font(.title)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.1))
    }
}

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