SwiftUI中如何获取文本动态适配的按钮元素尺寸？

为什么直接用GeometryReader会失效 #

直接将按钮包裹在GeometryReader中时，GeometryReader会优先占据父视图的可用空间，导致按钮的布局被强制适配这个容器的尺寸（这就是你得到高度10且布局混乱的原因），而不是让按钮先根据文本内容确定自身大小后再被测量。

正确实现方案 #

通过给按钮添加GeometryReader作为背景层来获取尺寸——背景层会自动匹配按钮的实际大小，不会干扰按钮的原有布局。具体步骤如下：

1. 定义一个状态变量存储按钮尺寸：

@State private var buttonSize: CGSize = .zero

2. 修改按钮代码，添加背景层测量尺寸：

Button(action: {
    // 按钮点击逻辑
}) {
    Text(options[i])
        .font(.system(.headline, design: .rounded))
        .frame(maxWidth: .infinity, alignment: .leading)
        .foregroundColor(Color(red: 0.3, green: 0.3, blue: 0.3))
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 12)
                .fill(Color.white)
        )
}
.background(
    GeometryReader { geo in
        Color.clear // 透明背景，不影响按钮外观
            .onAppear {
                buttonSize = geo.size // 初始加载时获取尺寸
            }
            .onChange(of: options[i]) { _ in
                buttonSize = geo.size // 文本变化时更新尺寸
            }
    }
)

关键说明 #

• Color.clear确保背景层不会改变按钮的视觉效果，仅用于测量尺寸。
• onAppear和onChange分别处理初始加载和文本动态变化时的尺寸更新，保证buttonSize始终是按钮的当前实际尺寸。
• 你可以在任意需要的地方使用buttonSize（比如调整其他视图的布局、做动画等）。

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