如何结合GeometryReader实现靠右的响应式文本框并获取尺寸？

需求是让文本靠右显示（当前用HStack+Spacer实现），同时根据文本占用空间动态调整视图参数（如字号、容器尺寸），但GeometryReader的贪婪特性导致无法正确获取尺寸，还破坏布局。

原布局代码（文本位置正确，但无响应式逻辑）：

struct ResponsiveTextBox: View {
    @State var text = "Hi. "
    var body: some View {
        VStack {
            ZStack{
                RoundedRectangle(cornerRadius: 5)
                    .stroke()
                HStack {
                    Spacer()
                    Text(text)
                }
            }
            .frame(width: 300, height: 100)
            Button("Add text") {
                text += "Hi. "
            }
            Button("Erase text") {
                text = ""
            }
        }
    }
}

尝试的两种无效方案：

1. 包裹Spacer在GeometryReader中，无法缩小到HStack宽度50%以下：

[...] 
HStack {
    GeometryReader() {freeSpace in
        Spacer()
    }
    Text(text)
}
[...] 

2. 包裹Text在GeometryReader中，破坏靠右布局，文本移到左侧：

HStack {
    Spacer()
    GeometryReader() {textSpace in
        Text(text)
    }
}

正确实现方式 #

核心思路是用background修饰符给Text附加GeometryReader，这样既不会破坏原有布局，又能获取文本的实际尺寸。同时可结合preference传递尺寸值，或直接在内部使用尺寸做调整。

方案1：直接在Text背景中获取尺寸并调整 #

struct ResponsiveTextBox: View {
    @State var text = "Hi. "
    @State private var textSize: CGSize = .zero
    
    var body: some View {
        VStack {
            ZStack{
                RoundedRectangle(cornerRadius: 5)
                    .stroke()
                HStack {
                    Spacer()
                    Text(text)
                        .background(
                            GeometryReader { proxy in
                                Color.clear
                                    .onAppear {
                                        textSize = proxy.size
                                    }
                                    .onChange(of: text) { _ in
                                        textSize = proxy.size
                                    }
                            }
                        )
                        // 示例：根据文本宽度动态调整字号
                        .font(.system(size: min(24, 100 / (textSize.width == 0 ? 1 : textSize.width) * 10)))
                }
            }
            .frame(width: 300, height: 100)
            // 可选：根据文本尺寸调整容器大小
            // .frame(width: max(200, textSize.width + 20), height: max(50, textSize.height + 10))
            
            Button("Add text") {
                text += "Hi. "
            }
            Button("Erase text") {
                text = ""
            }
            
            // 调试用：显示当前文本尺寸
            Text("Text size: \(String(format: "%.1f", textSize.width)) x \(String(format: "%.1f", textSize.height))")
                .font(.caption)
        }
    }
}

方案2：使用PreferenceKey传递尺寸（更灵活） #

如果需要在父视图中使用文本尺寸，可通过PreferenceKey实现跨视图传递：

struct TextSizePreferenceKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

struct ResponsiveTextBox: View {
    @State var text = "Hi. "
    @State private var textSize: CGSize = .zero
    
    var body: some View {
        VStack {
            ZStack{
                RoundedRectangle(cornerRadius: 5)
                    .stroke()
                HStack {
                    Spacer()
                    Text(text)
                        .background(
                            GeometryReader { proxy in
                                Color.clear
                                    .preference(key: TextSizePreferenceKey.self, value: proxy.size)
                            }
                        )
                        .font(.system(size: min(24, 100 / (textSize.width == 0 ? 1 : textSize.width) * 10)))
                }
            }
            .frame(width: 300, height: 100)
            .onPreferenceChange(TextSizePreferenceKey.self) { newSize in
                textSize = newSize
            }
            
            Button("Add text") {
                text += "Hi. "
            }
            Button("Erase text") {
                text = ""
            }
            
            Text("Text size: \(String(format: "%.1f", textSize.width)) x \(String(format: "%.1f", textSize.height))")
                .font(.caption)
        }
    }
}

为什么之前的方法无效？ #

• 把Spacer包在GeometryReader里：GeometryReader会尽可能占据可用空间，导致Spacer无法正常分配剩余空间，因此无法缩小到50%以下。
• 把Text包在GeometryReader里：GeometryReader会抢占HStack的剩余空间，Spacer的布局作用被抵消，文本自然移到左侧。

而用background附加GeometryReader时，GeometryReader的尺寸会完全匹配Text的实际大小，既不会干扰原有布局的空间分配，又能准确获取文本尺寸用于响应式调整。

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